这是我参与「第四届青训营」笔记创作活动的第四天，此刻想记录vue中有动画效果的样式。
动画效果需要的条件
盒子进入或者离开时的动作，比如v-if,v-show，如果没有动画效果，就会显得很干脆突兀，缺乏了一些美观。
我用到的动画效果方式为以下两种：
- 通过css过渡和动画中
class使用 - 使用第三方css动画库，即
Animate.css
通过css过渡和动画中class使用
这种方式需要用到以下的属性：
- v-enter:定义元素进入的初始状态
- v-enter-active：进入过程的过渡动画
- v-enter-to：定义元素进入动画结束后的状态
- v-leave：定义元素离开的初始状态
- v-leave-active：离开过程的过渡动画
- v-leave-to：定义元素离开动画结束时的状态
v是默认的，如果有动画过渡的部分放在transition元素里边，并且有绑定name属性，则可以用name的值取代v,例子如下：
<transition name="fade"> </transition>
css部分：
.fade-enter-active, .fade-leave-active { transition: opacity .8s; }.fade-enter, .fade-leave-to { opacity: 0; }
使用第三方css动画库
我自己经常用的是这种方法，个人觉得这种方法会更简单，而且动画库里的效果有很多还是挺炫酷的。
- 首先要先在编辑器里边安装好
npm i animate.css --save - 然后导入
import 'animate.css'然后就可以正常使用了，动画的样式要进入动画库里边复制，使用的时候将需要动画的那部分放进<transition>中，同时带上属性<name>、enter-active-class和leave-active-class,举个例子：
单独是进入和离开的状态时，<name>的值可以是上图中这么写，enter-active-class指进入时的动画，leave-active-class指离开时的动画，进入与离开的值需要到动画库里边复制。仅此而已，不需要再写其他动画样式，方便很多。
总结
动画效果在开发中用的比较普遍，vue中动画库的使用真的会方便许多，用起来很顺畅。
