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: .........完整代码请登录后点击上方下载按钮下载查看