1、前言
Vue在插入、更新或者移除DOM时，提供了多种不同方式的应用过渡效果。包括以下工具：
. 在CSS过渡和动画中自动应用class
. 可以配合使用第三方CSS动画库，如：Animate.css
. 在过渡钩子函数中使用JavaScript直接操作DOM
. 配合使用第三方JavaScript动画库，如：Velocity.js
2、过渡或动画的了解
Vue提供了transition的封装组件，来处理过渡以及动画
2.1 使用过渡或动画的场景
在下列情况中，可以给任何元素和组件添加进入/离开过渡
1. 条件渲染（使用v-if）
2. 条件展示（使用v-show）
3. 动态组件
4. 组件的根节点
2.2 使用说明
1. 只有dom从隐藏到显示，或显示到隐藏，才能使用Vue的过渡或动画
2. 动画的元素需要被Vue所提供的组件transition所包裹
3. 在插入或删除transition包裹元素时，Vue会在恰当的时机添加或删除类名
4. 如果过渡的组件提供了JavaScript钩子函数，则Vue会在恰当的时机调用这些钩子函数
5. 如果没有找到JavaScript钩子函数，并且也没有检测到CSS过渡/动画，则会在下一帧中立即执行
3、Vue过渡的使用
3.1 过渡的了解
Vue过渡/动画两个过程，分别为进入和离开，Vue会在不同的需要过渡的元素在进入/离开的不同时机给元素添加不同的类名.
不同阶段的类名：
3.2 过渡类名的了解
在进入/离开的过渡中，会有6个class切换.
1. v-enter：定义进入过渡的开始状态，在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. v-enter-active：定义进入过渡生效时的状态，在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除，这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to：2.1.8版本以上定义进入过渡的结束状态，在元素被插入之后下一帧生效（与此同时v-enter被移除），在过渡/动画完成之后移除。
4. v-leave：定义离开过渡的开始状态，在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：定义离开过渡生效时的状态，在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除，这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to：2.1.8版本以上定义离开过渡的结束状态，在离开过渡被触发之后下一帧生效（与此同时v-leave被移除），在过渡/动画完成之后移除。
3.3 过渡前缀
如果你使用一个没有名字的
如果使用了
3.4 在过渡中使用贝塞尔曲线
4、CSS动画
我们处理可以在Vue中使用过渡transition，还可以使用CSS动画animation
4.1 自定义过渡动画的类名
我们也可以通过以下attribute来自定义过渡类名：
1. enter-class
2. enter-active-class
3. enter-to-class
4. leave-class
5. leave-active-class
6. leave-to-class
它们的优先级高于普通的类名，这对于Vue的过渡系统和其他第三方CSS动画库，如：animate.css结合使用十分有效。
5、动画插件库
animated.css使用的是keyframes的动画
5.1 安装
npm install animate.css --save-dev
5.2 引入