Vue animate.css使用方法

安装

yarn add animate.css

在main.js中引入

import animate from 'animate.css'

Vue.use(animate)

使用

使用 transition 动画，和Animate.css 库动画效果

transition的duration属性：duration - number | {enter: number, leave: number} 指定过渡的时间。默认情况下，Vue会等待过渡所在根元素的第一个transitionend或者animationend事件

一共有三种过渡方式:

1. default：淡入和淡出过渡同时发生
2. in-out：新元素首先淡入。 然后当前元素淡出
3. out-in：当前元素先淡出。 然后新元素开始淡入

v-enter / v-leave: 进入/离开过度的开始状态;
v-enter-to / v-leave-to: 进度/离开过度的结束状态;
v-enter-active / v-leave-active: 进入/离开过度时的生效状态;

淡入淡出过渡有一个名为 fade-enter-from 的类,