Vue基础进阶 之 列表过渡

时间:2019-04-20
本文章向大家介绍Vue基础进阶 之 列表过渡，主要包括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>

 提示的错误：

 当然用了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>
小案例总的代码
随机文章
Javascript知识点必读
最近更新