标签：动画 Vue 淡入 title 避坑 退出 Animate 淡出 弹跳

一、安装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);

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

标签：动画,Vue,淡入,title,避坑,退出,Animate,淡出,弹跳
来源： https://blog.csdn.net/Zoriah/article/details/111172226

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。