Vue动画之多个元素或组件的动画效果
前面我们看的是单个元素的过渡效果,我们看一下多个元素或者组件的过渡
多个元素过渡
<div id="app">
<transition>
<p v-if="show" key="hell">Hello 十月梦想!</p>
<p v-else key="bye">Bye! Bye! 十月梦想!</p>
</transition>
</div>动态控制if的数据控制显示
var app=new Vue({
el:"#app",
data:{
type:"item",
show:true
},
methods:{
qiehuan:function(){
this.show=!this.show
}
}
})
</script>多个元素我们需要在元素上指定唯一的key值,否则是vue会进行dom复用没有效果,加上唯一的key则可以解决这个问题!
多组件过渡
多个组件的过渡和元素一样,定义两个组件,把transition中元素替换组件就行!我们说一下实现动态组件,进行过渡
动态组件在之前我们已经介绍过!
<transition mode="out-in">
<component :is="type"></component>
</transition>
<button type="button" @click="qh">切换</button>在动态组件绑定一个控制的属性(绑定is)
js新建的组件,以及切换的方法
Vue.component('item',{
template:`
<p>item</p>
`
})
Vue.component('item-one',{
template:`
<p>item-one</p>
`
})
var app=new Vue({
el:"#app",
data:{
type:"item",
show:true
},
methods:{
qh:function(){
this.type=this.type=='item'?"item-one":"item";
}
}
})本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-9-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录