对于过度动画如果要同时渲染整个列表时,可以使用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>
到此这篇关于Vue.javascript源码分析(二十九)高级应用transition-group组件详解就介绍到这了。给自己一份坚强,擦干;给自己一份,不卑不亢;给自己一份洒脱,悠然前行。轻轻品,静静藏。为了看,我来到这世上;为了与阳光同行,我笑对忧伤。更多相关Vue.javascript源码分析(二十九)高级应用transition-group组件详解内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!