一.作用：
在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。
二.图示：
三.写法：
1.准备好样式
- 元素进入的样式：
-
v-enter：进入的起点
-
v-enter-active：进入过程中
-
v-enter-to：进入的终点
-
- 元素离开的样式
-
v-leave：离开的起点
-
v-leave-active：离开过程中
-
v-leave-to：离开的终点
-
2.使用<transition>包裹要过度的元素，并配置name属性：
3.备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。
四.案例及讲解
1.一个元素的动画效果
利用<transition>标签实现过渡，添加appear属性可以实现出现时就有动画效果
@keyframes定义动画名
animation调用该动画
2.多个动画效果
多个动画效果需要给<transition>标签添加name属性和修改类名（将v换成指定name）
过渡效果
3.多个元素的动画效果
多个元素使用同一个过渡效果，使用<transition-grounp>标签，每个过渡的元素都要添加独一无二的key
五.动画效果有集成的第三方动画库
安装Animate.css
1.npm iinstall animate.css --save
使用方法：
引入：import 'animate.css'
在transition标签配置name属性为animate__animated animate__bounce，，enter-active-class可在官网复制提供的进入动画名，leave-active-class也可以在官网提供的离开动画名
标签：动画,Vue,封装,name,元素,leave,active,animate From： https://www.cnblogs.com/MDRY/p/16636900.html