<!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>