Vue.js源码分析(二十九)高级应用transition-group组件详解
对于过度动画如果要同时渲染整个列表时，可以使用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>
