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