VUE之动画特效

1. 在vue使用animate.css库

安装：npm install animate.css --save

引用：import animate from 'animate.css'

vue中使用动画必须要使用到 <transition>标签，将需要动画特效的标签用transition包裹着

栗子：

图a

在图a中，animated必须要，然后再加上你想要的动画类名；

appear ,appear-active-class属性是让动画在页面初始化或刷新的时候就出现

2.不引用aniamte库时，过渡动画该怎么写？

在进入/离开的过渡中，会有 6 个 class 切换。传送门：官网查看

其中 v 是可以根据transition标签的 name 属性值而变，例如<transition name="fade">,样式名对应则是 fade-enter,fade-enter-active......

enter-class，enter-active-class，enter-to-class (2.1.8+)，leave-class，leave-active-class，leave-to-class (2.1.8+)

摘自官网

---

3.及引用animate库又使用自定义动画

当应用了animate库时，又想自定义动画时，这时候可以如下图b所示enter-active-class,leave-active-class属性里添加自己的class类名，

然后去css定义自己的动画，时间上如果有冲突，则可用图b所示的解决方法 

:duration="{enter:时间，leave:时间}"或者 :duration="时间"

图b 图c

4.多个元素过度

摘自官网

有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，在v-if/v-else 后面添加一个 key="your-keyname"