一、单个元素/ 组件过渡动画（自带）
过渡动画简单而言就是定义前后两帧；
Vue 提供了
<transition> 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡：
1️⃣ 条件渲染(使用 v-if )条件展示(使用 v-show)
2️⃣ 动态组件
3️⃣ 组件根节点原理：
当插入或删除包含在
<transition> 组件中的元素时，Vue 将会做以下处理：
1、自动嗅探目标元素是否应用了CSS过渡或者动画，如果有，那么在恰当的时机添加/删除CSS类名；
2、如果transition 组件提供了JavaScript钩子函数，这些钩子函数将在恰当的时机被调用；
3、如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画，DOM插入、删除操作将会立即执行；其中控制动画的
class 属性如下：（v-是默认前缀，如果transition有 name 属性则使用其值）v-enter-from：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效(与此同时v-enter-from 被移除)，在过渡/动画完成之后移除。
v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效(与此同时v-leave-from 被删除)，在过渡 / 动画完成之后移除。
⭐ 需要注意的是：我们 transition 组件有一个
type 属性，我们可以设置为 transition / animation，建议 animation 和 transition 不要共用，且两个动画同时存在的时候，使用最长时间动画所对应的属性（但是仍有动画冲突的可能）；如果只有一个属性的话，Vue能自动识别。此外，我们可以用
duration 属性设置过渡时间。1️⃣ number类型：同时设置进入和离开的时间 :duration="1000"；2️⃣ object类型：分别设置进入和离开的过渡时间 :duration="{enter: 800, leave: 1000}"Mode
常见于两元素进行切换的时候，是如果我们不希望同时执行进入和离开动画，那么我们需要设置transition的过渡模式：
1️⃣ in-out: 新元素先进行过渡，完成之后当前元素过渡离开；
2️⃣ out-in: 当前元素先进行过渡，完成之后新元素过渡进入；
Appear
初次渲染是否渲染动画，默认不渲染。如需渲染：
<transition name="why" appear>...</transition>二、第三方库
Animate.css
安装
npm install animate.css --save使用
import "animate.css"使用一：
基本使用name属性对应样式 name属性-enter-active。
使用二：
依赖自定义过渡class
gasp
案例
数字变化时跳动动画
三、列表过渡
以上，过渡动画我们只要是针对单个元素或者组件的：
- 要么是单个节点；
- 要么是同一时间渲染多个节点中的一个；
那么如果希望渲染的是一个列表，并且该列表中添加删除数据也希望有动画执行呢？
- 这个时候我们要使用
<transition-group>组件来完成；
使用
<transition-group> 有如下的特点：- 默认情况下，它不会渲染一个元素的包裹器（即默认不包含一个根元素包裹），但是可以指定一个元素并以tag attribute 进行渲染；
- 过渡模式不可用，因为我们不再相互切换特有的元素；
- 内部元素总是需要提供唯一的key attribute 值；
- CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身；
案例一
案例二
交替过渡动画
- 作者:😈Zabanya
- 链接:https://blog.zabanya.space/article/dadefbfe-c5fa-462f-89aa-e8c10e68b280
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处