vue

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：

1. 在 CSS 过渡和动画中自动应用 class

2.可以配合使用第三方 CSS 动画库，如 Animate.css

3. 在过渡钩子函数中使用 JavaScript 直接操作 DOM

4. 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

过渡的-CSS-类名

会有 6 个(CSS)类名在 enter/leave 的过渡中切换

v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

v-enter-active: 定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

v-enter-to:2.1.8版及以上定义进入过渡的结束状态。在元素被插入一帧后生效（于此同时v-enter被删除），在transition/animation完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

v-leave-active: 定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

v-leave-to:2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发一帧后生效（于此同时v-leave被删除），在transition/animation完成之后移除。

对于在enter/leave过渡中切换的类名，v-是这些类名的前缀。使用可以重置前缀，比如v-enter替换为my-transition-enter。

v-enter-active和v-leave-active可以控制进入/离开过渡的不同阶段

CSS 动画

CSS 动画用法同 CSS 过渡，区别是在动画中v-enter类名在节点插入 DOM 后不会立即删除，而是在animationend事件触发时删除。

自定义过渡类名

enter-class

enter-active-class

enter-to-class(>= 2.1.8 only)

leave-class

leave-active-class

leave-to-class(>= 2.1.8 only)

他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如Animate.css结合使用十分有用。

同时使用 Transitions 和 Animations

Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是transitionend或animationend，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。

但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如animation很快的被触发并完成了，而transition效果还没结束。在这种情况中，你就需要使用type特性并设置animation或transition来明确声明你需要 Vue 监听的类型。

显性的过渡效果持续时间

transition组件上的duration属性定制一个显性的过渡效果持续时间 (以毫秒计)：

钩子函数可以结合 CSS transitions/animations使用，也可以单独使用

当只用 JavaScript 过渡的时候，在enter和leave中，回调函数done是必须的。否则，它们会被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

多个元素的过渡

当有相同标签名的元素切换时，需要通过key特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在组件中的多个元素设置 key 是一个更好的实践。

同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了过渡模式

in-out: 新元素先进行过渡，完成之后当前元素过渡离开。

out-in: 当前元素先进行过渡，完成之后新元素过渡进入。