共计 2524 个字符，预计需要花费 7 分钟才能阅读完成。
一、基本用法
引入 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
