Vue引用Animate.css动画库实现应用过渡效果（以及不生效避坑）

一、安装animate.css

npm install animate.css@3.5.1 -S

划重点：博主使用的vue-cli3.0+，如果不指定animate的（低）版本，动画不生效！！！建议使用@3.x.x版本。

二、在main.js中全局引入

import animated from 'animate.css' // 引入
Vue.use(animated) // 全局注册

三、使用方法：给指定的元素加上指定的动画样式名

<div class="animated fadeInUp"></div>

到此就引用成功，完美。

---

动画效果类说明：

fade: {
	title: '淡入淡出',
	fadeIn: '淡入',
	fadeInDown: '向下淡入',
	fadeInDownBig: '向下快速淡入',
	fadeInLeft: '向右淡入',
	fadeInLeftBig: '向右快速淡入',
	fadeInRight: '向左淡入',
	fadeInRightBig: '向左快速淡入',
	fadeInUp: '向上淡入',
	fadeInUpBig: '向上快速淡入',
	fadeOut: '淡出',
	fadeOutDown: '向下淡出',
	fadeOutDownBig: '向下快速淡出',
	fadeOutLeft: '向左淡出',
	fadeOutLeftBig: '向左快速淡出',
	adeOutRight: '向右淡出',
	fadeOutRightBig: '向右快速淡出',
	fadeOutUp: '向上淡出',
	fadeOutUpBig: '向上快速淡出'
},
bounce: {
	title: '弹跳类',
	bounceIn: '弹跳进入',
	bounceInDown: '向下弹跳进入',
	bounceInLeft: '向右弹跳进入',
	bounceInRight: '向左弹跳进入',
	bounceInUp: '向上弹跳进入',
	bounceOut: '弹跳退出',
	bounceOutDown: '向下弹跳退出',
	bounceOutLeft: '向左弹跳退出',
	bounceOutRight: '向右弹跳退出',
	bounceOutUp: '向上弹跳退出'
},
zoom: {
	title: '缩放类',
	zoomIn: '放大进入',
	zoomInDown: '向下放大进入',
	zoomInLeft: '向右放大进入',
	zoomInRight: '向左放大进入',
	zoomInUp: '向上放大进入',
	zoomOut: '缩小退出',
	zoomOutDown: '向下缩小退出',
	zoomOutLeft: '向左缩小退出',
	zoomOutRight: '向右缩小退出',
	zoomOutUp: '向上缩小退出'
},
rotate: {
	title: '旋转类',
	rotateIn: '顺时针旋转进入',
	rotateInDownLeft: '从左往下旋入',
	rotateInDownRight: '从右往下旋入',
	rotateInUpLeft: '从左往上旋入',
	rotateInUpRight: '从右往上旋入',
	rotateOut: '顺时针旋转退出',
	rotateOutDownLeft: '向左下旋出',
	rotateOutDownRight: '向右下旋出',
	rotateOutUpLeft: '向左上旋出',
	rotateOutUpRight: '向右上旋出'
},
flip: {
	title: '翻转类',
	flipInX: '水平翻转进入',
	flipInY: '垂直翻转进入',
	flipOutX: '水平翻转退出',
	flipOutY: '垂直翻转退出'
},
strong: {
	title: '强调类',
	bounce: '弹跳',
	flash: '闪烁',
	pulse: '脉冲',
	rubberBand: '橡皮筋',
	shake: '左右弱晃动',
	swing: '上下摆动',
	tada: '缩放摆动',
	wobble: '左右强晃动',
	jello: '拉伸抖动'
}

扩展： 

1、给某个元素动态添加/移除动画样式：

// 添加
$('#yourElement').addClass('animated bounceOutLeft');

// 移除
$('#yourElement').removeClass('animated bounce');

2、动画效果执行完成后添加事件：

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

（-----------持续更新----------）