第五章动画 49 动画-实现列表删除和删除时候的动画效果

 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>
第五章 动画 49 动画-实现列表删除和删除时候的动画效果

第五章动画 49 动画-实现列表删除和删除时候的动画效果
