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

Animate.css

查看动态演示可以到我个站博客:https://zzzmh.cn/single?id=59

一、基本用法

引入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