Vue如何实现transition过渡动画

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

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>