vue-transition标签的使用

• transition作用：在 [插入] / [更新] / [移除] DOM 元素时，在合适的时候给元素添加样式类名（配合 CSS 样式使用，实现动画效果）

以下情形下，可以给任何元素和组件添加进行进入/离开过渡

• 条件渲染（使用 v-if）
• 条件展示（使用 v-show）
• 动态组件
• 组件根节点

在进入/离开的过渡中，会有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被删除），在过渡/动画完成之后移除。

 

自定义过渡得类名

我们可以通过以下 attribute 来自定义过渡类名：

• enter-class
• enter-active-class
• enter-to-class (2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (2.1.8+)

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