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 添加appear属性，实现页面刚展出来时候，入场时候的效果 --> 65 <!-- 通过 为transition-group 元素，设置tag属性，指定transition-group 渲染为指定的元素，如果不指定tag属性，默认，渲染为 span 标签 --> 66 <transition-group appear tag="ul"> 67 <li v-for="(item,i) in list" :key="item.id" @click="del(i)"> 68 {{item.id}}---{{item.name}} 69 </li> 70 </transition-group> 71 <!-- </ul> --> 72 </div> 73 74 <script> 75 //创建 Vue 实例，得到 ViewModel 76 var vm = new Vue({ 77 el:'#app', 78 data:{ 79 id:'', 80 name:'', 81 list:[ 82 {id:1,name:'赵高'}, 83 {id:2,name:'秦桧'}, 84 {id:3,name:'严嵩'}, 85 {id:4,name:'魏忠贤'}, 86 ] 87 }, 88 methods:{ 89 add(){ 90 this.list.push({id:this.id,name:this.name}) 91 this.id=this.name='' 92 }, 93 del(i){ 94 this.list.splice(i,1) 95 } 96 } 97 }); 98 </script> 99 </body> 100 </html>