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

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

animate inater插件_基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目...
功能简介基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...
Vue实现集成使用第三方Animate.css动画库详细教程（解决鼠标移入移出闪烁问题）
vue通过第三方集成Animate.css简单快速的实现动画,通过类名引用,可以轻松实现Animate的所有动画,Animate.css是一款强大的预设css3动画库,Animate.css内置了很多 ...
vue过渡动画Animate.css动画库(1)
一.前言: 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验, Vue中为我们可以自定义过渡或动画或者Vue提供一些内置组件完成动画,利用它们我们可以方便的实现过渡动画 ...
animate.css 动画库的使用
安装 npm install animate.css --save 在线文档 animate.css官方在线文档参考文章文章1@农药啊文章2@zxy_aabbcc 文章3@Suwanbin vu ...
Animate.css动画库的源码分析（大部分都是CSS3.0动画的使用）
由于工作中,时常有的时候需要用到动画特效,自己本身也对CSS3.0的很多动画感兴趣,所以也是不是写一写原始的动画特效,在github上有一个工作中总结的上千种动画特效:点击打开链接,欢迎关注和star ...
vue 使用animate.css动画库
vue 2示例 `先下载` `在 main.js中将Animate.css库导入到您的项目中,即在其中添加如下代码`==(切记两个都要引入不然没有效果下面的css是自己封装的动画时间效果之类的)= ...
animate.css 动画库的下载与使用
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章博客地址
使用animate.css动画库出现窗口抖动
主要思路是应该是大盒子内容太多把容器撑开出现的窗口抖动问题解决方法给父容器加overflow: hidden;也能实现bfc样式隔离
vue2的css 动画库的基本使用方式
初级css动画库的使用一.前言二.本次使用的CSS动画库三.Vue2的基础应用知识 1. 一个组件和六个类名 (1)一个组件 (2)六个类名四.CSS动画库的基础应用 1.animate.cs ...
性能强悍的CSS动画库--Animate.css
前言互联网圈子里有造"轮子"的说法,能用现成的就不要自己去捣鼓了,既省时又省力!今天介绍的就是一款性能强悍的CSS动画库(Animate.css)的使用指导. 安装方法方法一: ...

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

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

最新文章

热门文章