vue中过渡和动画的区别

一、过渡

官方文档     

 在进入/离开的过渡中，会有 6 个 class 切换。

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6. v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

个人理解

上方提供了四个时间点元素的状态，如果元素的过渡是 从哪儿来的回哪儿去 ， 进入前状态 和 离开后状态 相同，进入后状态 和 离开前状态 相同，那么css可以写在一起

1. v-enter：定义元素进入的初始状态
2. v-enter-active：定义元素进入过渡动画的 transition
3. v-enter-to：定义元素进入动画结束时的状态
4. v-leave：定义元素离开的初始状态
5. v-leave-active：定义元素离开过渡动画的 transition
6. v-leave-to：定义元素离开动画结束时的状态

动画：CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名不会立即删除，而是在动画结束时删除