Vue过渡动画实现
实现一个点击切换元素的隐藏和显示状态!
<div id="app">
<transition>
<p v-if="show">Hello World</p>
</transition>
<button @click="toggle">切换</button>
</div>需要把加入动画的元素放在transition组件内,定义一个按钮的切换方法
<script>
var app=new Vue({
el:"#app",
data:{
show:true
},
methods:{
toggle:function(){
this.show=!this.show;
}
}
})
</script>给不同状态下添加相应的样式
.v-enter,.v-leave-to{
opacity:0;
}
.v-enter-active,.v-leave-to{
color:#00BFFF;
transition: opacity 3s;
}可以给transition添加一个name,如果name为"fade",则class前缀为指定的name
动画过程中类名的变化
transition.png
我们可以自定义类名,在元素属性中添加进入状态 enter-active-class,和离开状态leave-active-class
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-9-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读