第五章动画 48：动画-使用transition-group元素实例列表动画

 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        }
23 
24        .v-enter,
25        .v-leave-to{
26         opacity: 0;
27         transform: translateY(80px);
28        }
29 
30        .v-enter-active,
31        .v-leave-active{
32         transition: all 0.6s ease;
33        }
34      </style>
35   </head>
36 
37   <body>
38       <div id="app">
39       <div>
40         <label>
41           Id:
42           <input type="text" v-model="id">
43         </label>
44 
45          <label>
46           Name:
47           <input type="text" v-model="name">
48         </label>
49 
50           <input type="button" value="添加" @click="add">
51       </div>
52       <ul>
53        <!--  在实现列表过渡的时候，如果需要过渡的元素，是通过v-for循环渲染出来的，不能使用transition包裹，需要使用transitionGroup -->
54       <!--  如果要为v-for循环创建的元素设置动画，必须为每一个元素设置 :key属性 -->
55        <transition-group>
56            <li v-for="item in list" :key="item.id">
57             {{item.id}}---{{item.name}}
58            </li>
59        </transition-group>
60       </ul>
61       </div>
62 
63       <script>
64           //创建 Vue 实例，得到 ViewModel
65           var vm =  new Vue({
66               el:'#app',
67         data:{
68           id:'',
69           name:'',
70           list:[
71             {id:1,name:'赵高'},
72             {id:2,name:'秦桧'},
73             {id:3,name:'严嵩'},
74             {id:4,name:'魏忠贤'},
75           ]
76         },
77         methods:{
78           add(){
79               this.list.push({id:this.id,name:this.name})
80               this.id=this.name=''
81           }
82         }
83           });
84       </script>
85   </body>
86 </html>
第五章 动画 48：动画-使用transition-group元素实例列表动画

第五章动画 48：动画-使用transition-group元素实例列表动画
