vue中过渡

vue中单元素/组件的过渡

Vue 提供了 transition 的封装组件，条件渲染 (使用 v-if)、条件展示 (使用 v-show)、动态组件和组件根节点中，可以给它们添加进入/离开过渡

过渡class–关于transition中的6个class切换

1、v-enter-from：进入过渡的开始状态。元素插入之前生效，插入之后，立即失效；
2、v-enter-active: 整个过渡阶段的应用；元素插入之前生效、过渡/动画完成之后立即失效；这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数；
3、v-enter-to: 进入过渡的结束状态。元素被插入之后立即生效，在过渡/动画完成之后移除；
4、v-leave-from: 离开过渡的开始状态。在离开过渡被触发时立即生效，下一帧被移除；
5、v-leave-active: 整个过渡阶段的应用；在离开过渡被触发时生效、过渡/动画完成之后立即失效；这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数；
6、v-leave-to: 离开过渡的结束状态。在离开过渡被触发时立即生效，在过渡/动画完成之后移除；

6个class之间的关系图