6. Vue 动画
Vue 提供了两个内置组件，可以帮助处理过渡和动画以响应不断变化的状态：
-
<Transition>用于在元素或组件进入和离开DOM时应用动画。本页对此进行了介绍。 -
<TransitionGroup>用于在将元素或组件插入列表、从中删除或在v-for列表中移动时应用动画。
6.1 Transition
<Transition>是一个内置组件：这意味着它可以在任何组件的模板中使用，而无需注册它。它可用于在通过其默认插槽传递给它的元素或组件上应用进入和离开动画。进入或离开可以由以下之一触发：
- 通过条件渲染
v-if - 通过条件显示
v-show <component>通过特殊元素切换动态组件
<Transition>仅支持单个元素或组件作为其插槽内容。如果内容是一个组件，则该组件也必须只有一个根元素。
6.2 动画状态
| . | 状态 |
|---|---|
| v-enter-from | 进入的起始状态。在元素插入之前添加，在元素插入后立马（一帧）移除。 |
| v-enter-active | 进入的活动状态。在整个进入阶段应用。在插入元素之前添加，在过渡/动画完成时移除。此类可用于定义进入过渡的持续时间、延迟和缓动曲线。 |
| v-enter-to | 进入的结束状态。在元素插入后添加一帧（同时v-enter-from被移除），在过渡/动画完成时移除。 |
| v-leave-from | 离开的开始状态。触发离开过渡时立即添加，一帧后删除。 |
| v-leave-active | 离开的活动状态。在整个离开阶段应用。在触发离开过渡时立即添加，在过渡/动画完成时删除。此类可用于定义离开过渡的持续时间、延迟和缓动曲线。 |
| v-leave-to | 休假的结束状态。在触发离开过渡后添加一帧（同时v-leave-from删除），在过渡/动画完成时删除。 |
6.3 transition 命名
<Transition name="fade">
</Transition>
对于命名转换，其转换类将以其名称而不是 v . 例如，上述转换的应用类将fade-enter-active代替v-enter-active. 淡入淡出过渡的 CSS 应如下所示：
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}