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>