Animate.css动画库下载、安装、使用与解析

（一）uni-app中引入Animate动画库

（1）下载animate动画文件

官方文档：http://www.animate.net.cn/

官方下载地址：https://animate.style/ 

（不知道官方下载的最新版本出现了什么问题，下载官方最新的没有效果，自己去找找问题，找到问题之后希望能够留言反馈给我，个人懒得去找原因了，下面Animate3.7版本的是可用的）

animate动画库的cdn地址：

<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">

简单粗暴的下载方法：复制cdn地址，对源码直接复制，保存到记事本，并更改文件名称为animate.css

（2）将下载好的animate动画文件添加到自己的项目中，并全局配置使用（common 是自定义文件夹）

/*引入自定义动画库 animate.css*/
	@import "/common/animate.min.css";

（3）使用animate动画库 ： animated + 动画

<view style="line-height: 25px;" class="animated rotateInUpRight" hover-class="fadeInUp">哈萨克激动啥肯定会进口的哈萨克记得哈卡斯</view>
<view style="line-height: 25px;" class="animated rotateInUpLeft" hover-class="flip">肯定会进口的哈萨克记得哈卡斯</view>

效果展示：

（4）宝典秘籍：Animate动画库所有动画样式

Class Name
bounce :上下弹跳
flash :闪烁
pulse :脉冲
rubberBand :橡皮筋式拉动
shake:摇晃
headShake :也是摇动
Swing :摆动
tada :缩放后晃动
wobble :左右晃动
jello :果冻弹弹
bounceIn :缩放后弹入
bounceInDown:下拉弹入
bounceInLeft :左侧弹出
bounceInRight :右侧弹出
bounceInUp :向上弹出
bounceOut :弹跳之后隐藏
bounceOutDown :弹跳之后向下隐藏
bounceOutLeft :弹跳之后向左隐藏
bounceOutRight :弹跳之后向右隐藏
bounceOutUp :弹跳之后向上隐藏
fadeIn :淡出
fadeInDown :下侧淡出拉出
fadeInDownBig :下拉直接呈现
fadeInLeft :左侧淡出拉出
fadeInLeftBig :左侧拉出
fadeInRight :右侧淡出拉出
fadeInRightBig :右侧拉出
fadeInUp :向上淡出拉出
fadeInUpBig :向上拉出
fadeOut :淡入
fadeOutDown :向下淡出隐藏
fadeOutDownBig :向下隐藏
fadeOutLeft :向左淡出隐藏
fadeOutLeftBig :向左隐藏
fadeOutRight :向右淡出隐藏
fadeOutRightBig :向右隐藏
fadeOutUp :向上淡出隐藏
fadeOutUpBig :向上隐藏
flipInX : x轴弹出
flipInY : y轴弹出
flipOutX : x轴弹入
flipOutY : y轴弹入
lightSpeedIn :快速拉出(附带菱形效果)
lightSpeedOut :快速拉入(附带芾菱形效果)
rotateIn :旋转弹出
rotateInDownLeft:上至下左侧旋转弹入
rotateInDownRight:上至下右侧旋转弹入
rotateInUpLeft:下至上左侧旋转弹入
rotateInUpRight:"下至上右侧旋转弹入

rotateOut :旋转弹出
rotateOutDownLeft:.上至下左侧旋转弹出
rotateOutDownRight :上至下右侧旋转弹出
rotateOutUpLeft :下至上左侧旋转弹出

rotateOutUpRight :下至上右侧旋转弹出
hinge :落叶式弹出
jackInTheBox:侧身弹出
rolIn :左侧向右滚入
rollOut :向右滚出
zoomIn :缓慢弹入
zoomInDown:下拐弯弹入(赞个)
zoomInLeft :左拐弯弹入
zoomInRight :右拐弯弹入
zoomInUp:上拐弯弹入
zoomOut :弹出
zoomOutDown:下拐弯弹出
zoomOutLeft :左拐弯弹出
zoomOutRight :右拐弯弹出
zoomOutUp :上拐弯弹出
slideInDown :向下侧拉入
slideInLeft :左侧拉入
slideInRight :右侧拉入
slideInUp: 向上拉入
slideOutDown :向下拉出
slideOutLeft :向左拉出
slideOutRight :向右拉出
sideoutUp :向上拉出

官方演示地址：http://www.jq22.com/yanshi819