vue_列表过渡动画_transition-group

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style type="text/css">
    .v-enter,
    .v-leave-to {
      opacity: 0;
    }
    .v-enter-active,
    .v-leave-active {
      transition: opacity 1s
    }
  </style>
</head>
<body>
  <div id="app">
    <h3>列表过渡动画</h3>
    <!-- 
    列表渲染，使用 <transition-group> 组件
    1.不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>(列表渲染包裹的容器)。你也可以通过tag属性更换为其他元素。
    2.过渡模式(mode)不可用，因为我们不再相互切换特有的元素。
    3.内部元素 总是需要 提供唯一的 key 属性值。
    4.CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。
     -->
    <transition-group tag="div">
      <div v-for="item of list" :key='item.id'>
        {{item.title}}---- {{item.id}}
      </div>
    </transition-group>
    <button @click="handleClick">切换</button>
  </div>
</body>
<script type="text/javascript">
  let count = 0
  let vm = new Vue({
    el: '#app',
    data: {
      list: []
    },
    methods: {
      handleClick () {
        this.list.push({
          id: count++,
          title: 'item'
        })
      }
    }
  })
</script>
</html>