Vue动画的淡入淡出效果
今天呢,我们来利用vue动画实现以下淡入淡出效果在vue中,显示隐藏和创建移除,一个元素或者一个组件的时候,可以通过transition实现动画主要通过6个类名来控制进入(显示,创建)v-enter 进入前 (vue3.0 v-enter-from)v-enter-active 进入中v-enter-to 进入后离开(隐藏,移除)v-leave 离开前 (vue3.0 v-leave-from)
·
今天呢,我们来利用vue动画实现以下淡入淡出效果
在vue中,显示隐藏和创建移除,一个元素或者一个组件的时候,可以通过transition实现动画
主要通过6个类名来控制
进入(显示,创建)
v-enter 进入前 (vue3.0 v-enter-from)
v-enter-active 进入中
v-enter-to 进入后
离开(隐藏,移除)
v-leave 离开前 (vue3.0 v-leave-from)
v-leave-active 离开中
v-leave-to 离开后
小案例实现淡入淡出动画:
<transition name="fade">
<p v-if="show">100</p>
</transition>
<style>
.fade-leave {
opacity: 1
}
.fade-leave-active {
transition: all 1s;
}
.fade-leave-to {
opcaity: 0
}
</style>
注意:多个transition使用不同动画,可以添加name属性,name属性的值替换v即可。
更多推荐
已为社区贡献1条内容
所有评论(0)