首页 Vue.js正文

Vue.js源码分析(二十九)高级应用transition-group组件详解

Vue.js 2019-11-16 14:11:38 598

对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件。

transition-group组件的props和transition组件类似,不同点是transition-group组件的props是没有mode属性的,另外多了以下两个props
tag    标签名
moveClass 新增/移除元素时的过渡 ;如果未指定则默认会拼凑出name+"-move"这个格式的,一般很少用到,比较复杂的动画可以该接口实现

不同于transition组件,transition-group组件它会以一个真实元素呈现,默认为一个<span>,我们也可以通过tag特性更换为其他元素,每个总都需要提供唯一的key属性值。以Vue官网的某例子为例,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <style>
        .list-item{display: inline-block;margin-right: 10px;}
        .list-enter-active,.list-leave-active{transition: all 1s;}
        .list-enter,.list-leave-to{opacity: 0;transform: translateY(30px);}
    </style>
    <div id="d">
        <button v-on:click='add'>add</button><button v-on:click='remove'>remove</button>
        <transition-group tag="p" name="list" >
            <span v-for="no in Nums" :key="no" class="list-item">{{no}}</span>
        </transition-group>
    </div>
    <script>
 Vue.config.productionTip=false;
 Vue.config.devtools=false;
        var app = new Vue({
            el:'#d',
            methods:{
                randomIndex:function(){return Math.floor(Math.random()*this.Nums.length)},
                add:function(){this.Nums.splice(this.randomIndex(),0,this.nextVal++)},
                remove:function(){this.Nums.splice(this.randomIndex(),1)}
            },
            data:{Nums:[1,2,3,4,5,6,7,8,9],nextVal:10}
        })
    </script>
</body>
</html>
© 编程脚本学习网