js使用viewTransition实现添加删除元素过渡动画效果代码-html代码-BFW代码库

js使用viewTransition实现添加删除元素过渡动画效果代码

代码语言：html

所属分类：动画

代码描述：js使用viewTransition实现添加删除元素过渡动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
.item {
  opacity: 1;
  height: 3rem;
  display: grid;
}

/* Put new transition name on each card to morph each */
.item-1 {
  view-transition-name: item-1;
}

.item-2 {
  view-transition-name: item-2;
}

.item-3 {
  view-transition-name: item-3;
}

.item-4 {
  view-transition-name: item-4;
}

/* ... rest set in JS */

.add {
  view-transition-name: add;
}


/* etc */
@layer base {
  body {
    font-family: system-ui, sans-serif;
  }
  
  button {
    border: none;
    background: none;
  }
  
  .items {
    padding: 0;
    display: grid;
    gap: 0.5rem;
  }
  
  .item {
    display: grid;
    grid-template-columns: 1fr auto;
    background: aliceblue;
    border: 1px solid lightblue;
    padding: 0 1rem;
    border-radius: 1rem;
    width: 300px;
  }
  
  .sr-only {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
  }
  
  .container {
    display: grid;
    justify-content: center;
    width: 300px;
    margin: 0 auto;
  }
  
  .add {
    font-size: 2rem;
    width: 3rem;
    height: 3rem;
    line-height: 0;
    margin: 0 auto;
}
</style>


  
  
</head>

<body >
  <div class="container">
  <ul class="items">
    <li class="item item-1">
      <p>Item 1 Name</p>
      <button class="delete">
        <span aria-hidden="true">❌</span>
        <span class="sr-only">delete</span>
      </button>
    </li>
    <li class="item item-2">
      <p>Item 2 Name</p>
      <button class="delete">
        <span aria-hidden="true">❌</span>
        <span class="sr-only">delete</span>
      </button>
    </li>
    <li class="item item-3">
      <p>Item 3 Name</p>
      <button class="delete">
        <span aria-hidden="true">❌</span>
        <span class="sr-only">delete</span>
      </button>
    </li>
    <li class="item item-4">
      <p>Item 4 Name</p>
      <button class="delete">
        <span aria-hidden="true">❌</span>
        <span class="sr-only">delete</span>
      </button>
    <.........完整代码请登录后点击上方下载按钮下载查看