一、基本用法
引入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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。