在进入/离开的过渡中，会有 6 个 class 切换： v-enter（插入）类原理—动画流程概念图
v-enter第一帧加入，第二帧移除；v-enter-active第一帧加入、贯穿整个过程结尾移除；v-enter-to第二帧加入、贯穿整个过程结尾移除 v-leave（移除）类原理—动画流程概念图：
同理：第一帧(增加v-leave和v-leave-active)、第二帧(移除v-leave、增加v-leave-to)，最后一帧(移除v-leave-active和v-leave-to)
概念图
首先回顾下过渡效果的实现
<style type="text/css"> .area{ width: 100px; height: 100px; background-color: red; } .fade-leave,fade-enter-to{ opacity: 1; } .fade-leave-active,fade-enter-active{ transition: opacity 3s; } .fade-enter-to,fade-enter{ opacity: 0; } </style> </head> <body> <div id="demo"> <transition name="fade"> <div v-if="show">我是显示内容</div> </transition> <button @click="handleClick">toggle</button> </div> <script type="text/javascript"> new Vue({ el:'#demo', data:{ show:true }, methods:{ handleClick(){ this.show=!this.show } } }) </script>借助fade-leave-active和fade-enter-active贯穿整个过程的特性，可以这样去写动画效果 （1）首先将CSS代码修改如下
.fade-leave-active{ } .fade-enter-active{ }（2）定义+调用动画效果
<style type="text/css"> /*1、定义动画效果*/ @keyframes bounceIn { 0%{transform: scale(0);} 50%{transform: scale(1.5);} 100%{transform: scale(1);} } /*2、调用动画*/ .fade-enter-active{ transform-origin: left center;/*转换基点*/ animation: bounceIn 1s; } .fade-leave-active{ transform-origin: left center;/*转基点左上角*/ animation: bounceIn 1s reverse;/* reverse 执行动画顺序翻转*/ } </style>公共化动画名 顾名思义，就是将动画名提取出来，以后直接使用即可。
公共化动画名步骤： 1、自行随意定义修改动画名
.fade-enter-active{ transform-origin: left center;/*转换基点*/ animation: bounceIn 1s; } .fade-leave-active{ transform-origin: left center;/*转基点左上角*/ animation: bounceIn 1s reverse;/* reverse 执行动画顺序翻转*/ }修改类名
.myEnter{ transform-origin: left center;/*转换基点*/ animation: bounceIn 1s; } .myLeave{ transform-origin: left center;/*转基点左上角*/ animation: bounceIn 1s reverse;/* reverse 执行动画顺序翻转*/ }公共化动画名步骤： 2、不使用默认提供的命名规范，在transition标签里添加相关属性 （1）enter-active-class属性 （2）enter-leave-class属性
<div id="demo"> <transition name="fade" enter-active-class="myEnter" enter-leave-class="myLeave"> <div v-if="show">我是显示内容</div> </transition> <button @click="handleClick">变形</button> </div>公共化动画名小结： 综上所述，当某些动画应用较多时，可以使用transition标签的enter-active-class属性和enter-leave-class属性调用公共的动画名。
语法如下所示
【前言】 既然现在可以自己定义enter-active-class和leave-active-class动画类名，决定相关动画效果，借助这个特性，可以在vue项目里使用当前比较流行的animate.css动画库(https://daneden.github.io/animate.css)。 （1）下载代码库引入 （2）选择相应动画效果类名并引入，如下所示 至此，便可以实现vue+animate.css动画库的结合使用
优势： 像某些比较复杂的动画效果，此时便省去手写过程，直接引入使用现有动画库即可，大大提高了开发效率。 注意： 1、必须使用transition标签的自定义动画名属性，即enter-active-class和leave-active-class 2、使用时必须加入animated类名 动画VS过渡 CSS 动画与CSS 过渡用法类似，区别在于 ①在过渡中v-enter类名在元素被插入之前生效，在元素被插入之后的下一帧移除，即在节点插入 DOM 后会立即删除 ②在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animation end 事件触发时删除
