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>
第五章 动画 50 动画-transition-group中appear和tag属性的作用