官方文档已经很详细了：进入/离开 & 列表过渡
实现主要就是用transition标签需要动画的元素，然后再css中给出动画样式，比如初始帧，关键帧，结束帧状态和持续方式。
transition动画，淡入淡出
官方实例：CSS 动画
需要动画展示的内容用transition标签包起来，<transition name='fade'>，其中fade就是淡入淡出
<transition name="fade">
<p v-if="show">hello</p>
</transition>
然后再样式中定义动画的具体实现，
.fade-enter-active, .fade-leave-active定义了动画在淡入淡出的持续时间，transetion: opacity 0.5s是指透明动画持续0.5秒，如果改成transition: all 0.5s则表示所有动画持续0.5秒。
.fade-enter, .fade-leave-to分别定义了动画在淡入动画第一帧、以及淡出动画最后一帧，这是可以分开定义的，淡入动画是从.fade-enter样式到默认样式的过程；淡出动画是从默认样式到fade-leave-to的过程；
.fade-enter-to是淡入动画最后一帧，一般不需要加，即使加上效果最好与默认样式一致，否则会有跳的感觉；.fade-leave-to是淡出动画最后一帧；
p是transition包起来的内容，定义了默认样式，这也是必填的（opacity:1可以省略）;
API: 过渡的类名
.fade-enter-active, .fade-leave-active {
transition: all 5s;
}
.fade-enter /* .淡入的第一帧，ade-leave-active below version 2.1.8 */
{
opacity: 0;
width: 100px;
font-size: small;
}
.fade-enter-to/* .淡入的最后一帧，ade-leave-active below version 2.1.8 */
{
opacity: 1;
height: 200px;
font-size: large;
}
.fade-leave-to /* 淡出的最后一帧，.fade-leave-active below version 2.1.8 */
{
opacity: 0;
width: 400px;
font-size: small;
}
p{
border: 1px solid red;
width: 800px;
font-size: large;
}
animation动画
官方实例：CSS 动画
<div id="example-2">
<button @click="show2 = !show2">Toggle show</button>
<transition name="bounce">
<p id="p-animation" v-if="show2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
</transition>
</div>
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
#p-animation{
border: 1px solid red;
width: 800px;
font-size: large;
}
利用第三方动画库（自定义过渡的类名）
1，在html中引用第三方的动画样式表
<!DOCTYPE html>
<html lang="">
<head>
……
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
</head>
<body>
……
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</body>
</html>
2，使用，具体有哪些预定义的类可以使用，见animate-css官网： animate-cssanimate.style/
<div id="example-3">
<button @click="show3 = !show3">
Toggle render
</button>
<transition
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show3">hello</p>
</transition>
</div>
JavaScript 钩子
第三方 JavaScript 动画库，如 Velocity.js，可以用钩子操作动画；
javascript动画库velocity.js文档
