<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <style> li { border: 1px dashed #999; margin: 5px; line-height: 35px; padding-left: 5px; font-size: 12px; width: 100%; } li:hover { background-color: hotpink; transition: all 0.8s ease; } .v-enter, .v-leave-to { opacity: 0; transform: translateY(80px); } .v-enter-active, .v-leave-active { transition: all 0.6s ease; } /* 下面的 .v-move 和 .v-leave-active 配合使用，能夠實現列表后續的元素，漸漸地漂上來的效果 */ .v-move { transition: all 0.6s ease; } .v-leave-active{ position: absolute; } </style> </head> <body> <div id="app"> <div> <label> Id: <input type="text" v-model="id"> </label> <label> Name: <input type="text" v-model="name"> </label> <!-- 添加數據 --> <input type="button" value="添加" @click="add"> </div> <!-- <ul> --> <!-- 在實現列表過渡的時候，如果需要過渡的元素，是通過 v-for 循環渲染出來的，不能使用 transition 包裹，需要使用 transitionGroup --> <!-- 如果要為 v-for 循環創建的元素設置動畫，必須為每一個 元素 設置 :key 屬性 --> <!-- 給 ransition-group 添加 appear 屬性，實現頁面剛展示出來時候，入場時候的效果 --> <!-- 通過 為 transition-group 元素，設置 tag 屬性，指定 transition-group 渲染為指定的元素，如果不指定 tag 屬性，默認，渲染為 span 標簽 --> <transition-group appear tag="ul"> <li v-for="(item, i) in list" :key="item.id" @click="del(i)"> {{item.id}} --- {{item.name}} </li> </transition-group> <!-- </ul> --> </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { id: '', name: '', list: [ { id: 1, name: '趙高' }, { id: 2, name: '秦檜' }, { id: 3, name: '嚴嵩' }, { id: 4, name: '魏忠賢' } ] }, methods: { add() { this.list.push({ id: this.id, name: this.name }) this.id = this.name = '' }, del(i) { this.list.splice(i, 1) } } }); </script> </body> </html>