Vue，動畫-列表動畫（添加，刪除）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="../js/vue.js"></script> 9 <script src="../js/vue-resource-1.3.4.js"></script> 10 </head> 11 <style> 12 li{ 13 border: 1px dashed #999; 14 margin: 5px; 15 line-height: 35px; 16 padding-left: 5px; 17 font-size: 12px; 18 width: 100%; 19 } 20 21 li:hover{ 22 background-color: blue; 23 transition: all 1s ease; 24 } 25 26 .v-enter, 27 .v-leave-to{ 28 opacity: 0; 29 transform: translateY(80px); 30 } 31 32 .v-enter-active, 33 .v-leave-active{ 34 transition: all 0.5s ease; 35 } 36 37 /* 下面的 .v-move 和 .v-leave-active 配合使用， 能夠實現列表后續的元素， 漸漸地飄上來的結果 */ 38 .v-move{ 39 transition: all 0.5s ease; 40 } 41 42 .v-leave-active{ 43 position: absolute; 44 } 45 </style> 46 <body> 47 <div id="app"> 48 49 <div> 50 51 <label> 52 Id: 53 <input type="text" v-model="id"> 54 </label> 55 56 <label> 57 Name: 58 <input type="text" v-model="name"> 59 </label> 60 61 62 <input type="button" value="添加" @click="add"> 63 64 </div> 65 66 67 <ul> 68 <!-- 在實現列表過渡的時候， 如果需要過渡的元素， 是通過 v-for 循環渲染出來的， 不能使用 transition 包裹， 需要使用 transitionGroup --> 69 <!-- 如果要為 v-for 循環創建的元素設置動畫， 必須為每一個 元素 設置 ：key 屬性 --> 70 <transition-group appear> 71 72 <!-- 刪除需要傳入i --> 73 <li v-for="(item, i) in list" :key="item.id" @click="del(i)"> 74 {{ item.id }} --- {{ item.name }} 75 </li> 76 </transition-group> 77 78 </ul> 79 </div> 80 </body> 81 </html> 82 <script> 83 var vm = new Vue({ 84 el:'#app', 85 data:{ 86 id:'', 87 name:'', 88 list:[ 89 {id: 1, name: '趙高' }, 90 {id: 2, name: '秦檜' }, 91 {id: 3, name: '嚴嵩' }, 92 {id: 4, name: '魏忠賢' } 93 ] 94 }, 95 methods:{ 96 97 add(){ 98 this.list.push( {id : this.id, name : this.name }) 99 this.id = this.name = "" 100 }, 101 del(i){ 102 // 從 i 的地方刪， 刪除一個 103 this.list.splice(i, 1) 104 } 105 106 } 107 }) 108 </script>
效果圖
