Vue基础进阶之列表过渡

在前面的博客我们一直在操作单个元素的过渡，如果是对多个元素过渡，例如列表，这时就要用到<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>

提示的错误：

Vue基础进阶之列表过渡

当然用了transition-group还不对

Vue基础进阶之列表过渡

提示错误：子组件需要一个key

注意，它们的key值是数值，如果是一个字符型，需要在其vue代码中定义其属性，将属性定义为数值，当然子组件的key值不能一样的

最终修改后正确的效果：

Vue基础进阶之列表过渡

实现两个组件的代码：

<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的使用