在进入/离开的过渡中，会有 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)
【前言】
既然现在可以自己定义enter-active-class和leave-active-class动画类名，决定相关动画效果，借助这个特性，可以在vue项目里使用当前比较流行的animate.css动画库(https://daneden.github.io/animate.css)。
Vue+animate.css动画库步骤
（1）下载代码库引入
（2）选择相应动画效果类名并引入，如下所示
至此，便可以实现vue+animate.css动画库的结合使用
优势： 像某些比较复杂的动画效果，此时便省去手写过程，直接引入使用现有动画库即可，大大提高了开发效率。
注意： 1、必须使用transition标签的自定义动画名属性，即enter-active-class和leave-active-class 2、使用时必须加入animated类名
CSS 动画与CSS 过渡用法类似，区别在于
①在过渡中v-enter类名在元素被插入之前生效，在元素被插入之后的下一帧移除，即在节点插入 DOM 后会立即删除②在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animation end 事件触发时删除vue动画+animate.css具体代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <style type="text/css"> .demo { width: 200px; height: 200px; background: red; } .demo1 { width: 200px; height: 200px; background: green; } /*1、定义动画*/ @keyframes bounce { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } /*2、调用动画*/ .bounceIn { transform-origin: left top; animation: bounce 1s; } .bounceOut { transform-origin: left top; animation: bounce 1s reverse; } </style> <link rel="stylesheet" type="text/css" href="css/animate.min.css" /> <script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="root"> <transition enter-active-class="bounceIn animated fadeInLeft" leave-active-class="bounceOut animated fadeOutDownBig" name="fade"> <div class="demo" v-show="status"></div> </transition> <button @click="handleClick">toggle</button> </div> <script type="text/javascript"> var root = new Vue({ el: '#root', data: { status: false }, methods: { handleClick() { this.status = !this.status; } } }) </script> </body> </html>