Animate.css 超强CSS3动画库，三行代码搞定H5页面动画特效！

一、基本用法
引入CSS依赖
<link rel=”stylesheet” href=”https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css”>
在元素的Class中加以下内容

animated (必选)
infinite (可选) 无限重复
bounce (必选) 动画样式 参考下方表格

delay-2s (可选) 延迟出现

<div class=”animated infinite bounce delay-2s”><h1>Example</h1></div>

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
flipInY

flipOutX
flipOutY
lightSpeedIn
lightSpeedOut

rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft

rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight

rotateOutUpLeft
rotateOutUpRight
hinge
jackInTheBox

rollIn
rollOut
zoomIn
zoomInDown

zoomInLeft
zoomInRight
zoomInUp
zoomOut

zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

slideInDown
slideInLeft
slideInRight
slideInUp

slideOutDown
slideOutLeft
slideOutRight
slideOutUp

heartBeat

大功告成，刷新页面即可查看动画效果。基本用法就是这些官方还给出了一些进阶用法如下

二、进阶用法
动态调用动画的Javascript例子
function animateCss(element, animationName, callback) {
const node = document.querySelector(element)
node.classList.add(‘animated’, animationName)

function handleAnimationEnd() {
node.classList.remove(‘animated’, animationName)
node.removeEventListener(‘animationend’, handleAnimationEnd)

if (typeof callback === ‘function’) callback()
}

node.addEventListener(‘animationend’, handleAnimationEnd)
}

三、在官方例子基础上，稍加修改以后
由于官方例子用的是querySelector，故只会选中第一个符合要求的元素。并且持续时间只有slow(2s)、slower(3s)、fast(800ms)、faster(500ms)故我稍加修改，依然用的原生JS语法(部分ES6)其中选择器element改为选中所有符合要求的元素新增times参数，可以是2000ms或者2s
/**
* element: 选择器 例如 #id | .class | div
* animationName: 动画名称 参考animate.css官网 例如fadeIn
* times: 持续时间 例如 200ms | 2s
* callback: 回调函数
*/
function animateCss(element, animationName,times, callback) {
const nodes = document.querySelectorAll(element)
nodes.forEach((node => {
if(times) node.style.setProperty(‘animation-duration’, times, ‘important’);
node.classList.add(‘animated’, animationName)
function handleAnimationEnd() {
node.classList.remove(‘animated’, animationName)
node.removeEventListener(‘animationend’, handleAnimationEnd)

if (typeof callback === ‘function’) callback()
}
node.addEventListener(‘animationend’, handleAnimationEnd)
}))
}
例子
animateCss(‘.post’, ‘pulse’);
animateCss(‘.post’, ‘pulse’,’200ms’);
animateCss(‘.post’, ‘pulse’,’200ms’,function(){//do something});

Animate.css官网
https://daneden.github.io/animate.css/https://github.com/daneden/animate.css

另外本篇文章也发表在了我的个人主页，欢迎来查看https://zzzmh.cn/single?id=59