Vue 过渡效果的组件

---

1. 单节点的过渡

1.1 应用场景

Vue 提供了标签为 transition 的 内置组件，在：

• 元素或组件初始渲染时；
• 元素或组件显示/ 隐藏时(使用v-if 或早show 进行条件渲染时)；
• 元素或组件切换时。

我们可以给任何元素和组件添加进入/ 离开时的过渡动画。

1.2 定义过渡效果的方式

Vue 允许用户使用 CSS 和 JS 两种方式来定义过渡效果。

1. 使用 CSS 过渡：需预置符合Vue 规则的带样式的类名（用于定义过渡不同阶段时的样式:）

   类名	说明
   v-enter	定义进入过渡的开始状态。在元素被插入前生效，被插入后的下一帧移除。
   v-enter-active	定义进入过渡生效时的状态o 在整个进入过渡阶段中应用，在元素被插入之前生效，在过渡/ 动画完成之后移除。这个类可以用来定义进入过