Vue动画之列表过渡
首先我们定义一个列表循环的元素放在transition-group中
<div id="app">
<transition-group>
<div v-for="item of list" :key="item.id">{{item.name}}</div>
</transition-group>
<button @click="add">add</button>
</div>Vue实例方法
var app=new Vue({
el:"#app",
data:{
id:0,
list:[]
},
methods:{
add:function(){
this.list.push(
{
id:this.id++,
name:"hello Workd"
}
)
}
}
})我们需要给循环的元素绑定一个key,否则我们说过前面多元素的时候,会出现dom复用,不能有动画效果!因此绑定一个唯一的key!使用add按钮,每一项都有一个过渡效果!
那么他的实现原理是什么?我们来看一下!
相当于是一个组循环的每一项是一个单独的transition组件,每个组合有相同动画状态的class,设置css样式就行
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-9-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读