1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <!--1.导入Vue的包--> 10 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 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 } 19 li:hover{ 20 background-color: hotpink; 21 transition: all 0.8s ease; 22 width: 100%; 23 } 24 25 .v-enter, 26 .v-leave-to{ 27 opacity: 0; 28 transform: translateY(80px); 29 } 30 31 .v-enter-active, 32 .v-leave-active{ 33 transition: all 0.6s ease; 34 } 35 36 /*下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果*/ 37 .v-move{ 38 transition: all 0.6s ease; 39 } 40 .v-leave-active{ 41 position: absolute; 42 } 43 </style> 44 </head> 45 46 <body> 47 <div id="app"> 48 <div> 49 <label> 50 Id: 51 <input type="text" v-model="id"> 52 </label> 53 54 <label> 55 Name: 56 <input type="text" v-model="name"> 57 </label> 58 59 <input type="button" value="添加" @click="add"> 60 </div> 61 <ul> 62 <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过v-for循环渲染出来的，不能使用transition包裹，需要使用transitionGroup --> 63 <!-- 如果要为v-for循环创建的元素设置动画，必须为每一个元素设置 :key属性 --> 64 <transition-group> 65 <li v-for="(item,i) in list" :key="item.id" @click="del(i)"> 66 {{item.id}}---{{item.name}} 67 </li> 68 </transition-group> 69 </ul> 70 </div> 71 72 <script> 73 //创建 Vue 实例，得到 ViewModel 74 var vm = new Vue({ 75 el:'#app', 76 data:{ 77 id:'', 78 name:'', 79 list:[ 80 {id:1,name:'赵高'}, 81 {id:2,name:'秦桧'}, 82 {id:3,name:'严嵩'}, 83 {id:4,name:'魏忠贤'}, 84 ] 85 }, 86 methods:{ 87 add(){ 88 this.list.push({id:this.id,name:this.name}) 89 this.id=this.name='' 90 }, 91 del(i){ 92 this.list.splice(i,1) 93 } 94 } 95 }); 96 </script> 97 </body> 98 </html>