一、Vue的动画效果
（一）编写CSS关键帧动画
@keyframes show{from{transform: translateX(-100%);}to{transform: translateX(0px);}
}（二）定义动画效果
.v-enter-active { animation: 配置项 } // 显示动画
.v-leave-active { animation: 配置项 } // 隐藏动画
.v-enter-active{animation: show 0.5s;
}.v-leave-active {animation: show 0.5s reverse;
}@keyframes show{from{transform: translateX(-100%);}to{transform: translateX(0px);}
}（三）在模板中使用效果
<transition> 动画对象 </transition>
（四）动画的属性
我们能够在上面的transition标签中添加一些属性
1. name属性
该属性主要是解决添加多个动画的情况，如果全部都是v-xxx-active，样式就很单一。
因此我们可以给transition标签设置name属性，来标识动画对象。
<transition name="名称"> 动画对象 </transition>
// style样式
.名称-enter-active { animation: 配置项 } // 显示动画
.名称-leave-active { animation: 配置项 } // 隐藏动画
2. appear属性
如果我们想让页面一加载的时候就触发一次动画，就可以使用appear属性：
<transition appear> 动画对象 </transition>
二、 Vue的过度效果
过度效果分为六个过程：
进入的起点，进入的过程，进入的终点
离开的起点，离开的过程，离开的终点
这里进入的过程和离开的过程就是上面的v-enter-active和v-leave-active。
.v-enter // 进入的起点
.v-enter-to // 进入的终点
.v-leave // 离开的起点
.v-leave-to // 离开的终点
很多时候进入的起点就是离开的终点，离开的起点就是进入的终点：
这里的hello-xxx-xxx是给transition设置了name="hello"
/* 进入的起点，离开的终点 */
.hello-enter, .hello-leave-to {transform: translateX(-100%);
}.hello-enter-active, .hello-leave-active {transition: transform 0.5s;
}/* 进入的终点，离开的起点 */
.hello-enter-to, .hello-leave {transform: translateX(0);
}
三、多个元素过度
我们有多个元素要添加过度效果的时候就不能使用transition标签，也就是说一个transistion标签中只能给一个元素添加过度效果。
如上情况我们就要使用transition-group标签，并给里面的每一项添加一个唯一key值：
<transition-group>
<标签 :key="1">
<标签 :key="2">
</transition-group>
四、集成第三方动画
我们可以使用第三方的集成库来使用动画，常用的有animate.css库：
Animate.css | A cross-browser library of CSS animations.
往下滑动就可以看到官方教程。
（一）安装animate.css
npm i animate.css
安装完成后在项目中进行引用这个CSS样式库
（二）配置name属性
对目标添加样式的标签添加上name属性：
<标签 name="animate__animated animate__bounce"></标签>
（三）添加class样式
在侧边栏选中你心意的样式然后复制后面的样式码
将进入样式和离开样式分别配置在如下两个属性上：
enter-active-class // 进入样式
leave-active-class // 离开样式
