在前面的博客我们一直在操作单个元素的过渡，如果是对多个元素过渡，例如列表，这时就要用到<transition-group>这个组件了；
如何使用：将要操作的列表元素放在<transition-group></transition-group>内，其他与<transition>基本一致； 注意：在<transition-group>的元素要指定个唯一的 :key 属性
例如：
代码：
<transition name='fade'>
<div v-show="flag" class="mybtn"></div>
<div v-show="flag" class="mybtn"></div>
</transition>
提示的错误：
当然用了transition-group还不对
提示错误：子组件需要一个key
注意，它们的key值是数值，如果是一个字符型，需要在其vue代码中定义其属性，将属性定义为数值，当然子组件的key值不能一样的
最终修改后正确的效果：
实现两个组件的代码：
<div>
<button @click="flag=!flag">显示/隐藏</button>
<transition-group name='fade'>
<div v-show="flag" class="mybtn" :key='a'></div>
<div v-show="flag" class="mybtn" :key='b'></div>
</transition-group>
</div>
vue代码：
let vm= new Vue({
data:{
flag:false,
a:'1',
b:'2'
}
}).$mount('div');
总的代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>15_列表过渡</title>
6 <script type="text/javascript" src="../js/vue.js" ></script>
7 <style>
8
9 .mybtn{
10
11 width: 100px;
12 height: 100px;
13 background-color: red;
14 transform: translateX(50px);
15 }
16 .fade-enter-active,.fade-leave-active{
17 transition: all 2s;
18
19 }
20 .fade-enter{
21 opacity: 0;
22 transform: translateX(0px);
23 }
24 .fade-enter-to{
25 opacity: 1;
26 transform: translateX(50px);
27 }
28 .fade-leave{
29 opacity: 1;
30 transform: translateX(50px);
31 }
32 .fade-leave-to{
33 opacity: 0;
34 transform: translateX(0px);
35 }
36
37 </style>
38
39 </head>
40 <body>
41 <div>
42
43
44 <button @click="flag=!flag">显示/隐藏</button>
45 <transition-group name='fade'>
46 <div v-show="flag" class="mybtn" :key='a'></div>
47 <div v-show="flag" class="mybtn" :key='b'></div>
48
49 </transition-group>
50
51 </div>
52 </body>
53
54 <script>
55
56
57
58
59
60 let vm= new Vue({
61 data:{
62
63 flag:false,
64 a:'1',
65 b:'2'
66
67 }
68
69 }).$mount('div');
70
71
72
73
74 </script>
75 </html>
测试transition-group的使用
小案例
最终效果：
vue代码：
<script>
let vm= new Vue({
data:{
flag:false,
a:'1',
b:'2',
numArray:[1,2,3,4,5]
},
methods:{
addNum(){
let num=Math.ceil(Math.random()*100);//向上取整
this.numArray.push(num);
},
removeNum(index){
this.numArray.splice(index,1);
}
}
}).$mount('div');
</script>
以上代码根据索引删除数字
<div>
<button @click="addNum">添加数字</button>
<transition-group name='fade'>
<li v-for="(item,index) in numArray" :key="item">
{{item}}
<button @click="removeNum(index)">-</button>
</li>
</transition-group>
</div>
在transition-group中默认是tag='span'
用到的样式：
<style>
.fade-enter-active,.fade-leave-active{
position: absolute;
transition: all .5s;
}
.fade-enter{
opacity: 0;
transform: translateX(-20px);
}
.fade-enter-to{
opacity: 1;
}
.fade-leave{
opacity: 1;
}
.fade-leave-to{
opacity: 0;
transform: translateX(20px);
}
.fade-move{
transition: transform .5s;
}
</style>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>15_列表过渡</title>
6 <script type="text/javascript" src="../js/vue.js" ></script>
7 <style>
8
9
10 .fade-enter-active,.fade-leave-active{
11 position: absolute;
12 transition: all .5s;
13
14 }
15 .fade-enter{
16 opacity: 0;
17 transform: translateX(-20px);
18 }
19 .fade-enter-to{
20 opacity: 1;
21
22 }
23 .fade-leave{
24 opacity: 1;
25
26 }
27 .fade-leave-to{
28 opacity: 0;
29 transform: translateX(20px);
30 }
31
32 .fade-move{
33 transition: transform .5s;
34 }
35 </style>
36
37 </head>
38 <body>
39 <div>
40
41
42 <button @click="addNum">添加数字</button>
43 <transition-group name='fade'>
44 <li v-for="(item,index) in numArray" :key="item">
45 {{item}}
46 <button @click="removeNum(index)">-</button>
47
48
49 </li>
50
51
52 </transition-group>
53
54 </div>
55 </body>
56
57 <script>
58
59
60
61
62
63 let vm= new Vue({
64 data:{
65
66 flag:false,
67 a:'1',
68 b:'2',
69 numArray:[1,2,3,4,5]
70
71 },
72 methods:{
73 addNum(){
74 let num=Math.ceil(Math.random()*100);//向上取整
75 this.numArray.push(num);
76 },
77 removeNum(index){
78 this.numArray.splice(index,1);
79
80 }
81 }
82
83 }).$mount('div');
84
85
86
87
88 </script>
89 </html>
小案例总的代码