Vue如何实现transition过渡动画

Vue.js的transition组件用于实现转场动画。它可以向任何元素和组件添加进入/退出转换。下面web建站小编给大家简单介绍一下！

transition过渡的类名介绍：

.v-enter:进入过渡的开始状态
.v-enter-active:进入过渡生效状态
.v-enter-to:进入过渡的结束状态
.v-leave:离开过渡的开始状态
.v-leave-active:离开过渡生效状态
.v-leave-to:离开过渡的结束状态

实现动画效果：

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to {
  opacity: 0
}

设置动态组件：

<transition name="fade" mode="out-in">
  <component :is="componentName"></component> 
</transition>

上面是“Vue如何实现transition过渡动画”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_5081.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！