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

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

一、基本用法

引入CSS依赖

<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css">

在元素的Class中加以下内容

  1. animated (必选)
  2. infinite (可选) 无限重复
  3. bounce (必选) 动画样式 参考下方表格
  4. delay-2s (可选) 延迟出现
<div class="animated infinite bounce delay-2s"><h1>Example</h1></div>
Class Name
bounceflashpulserubberBand
shakeheadShakeswingtada
wobblejellobounceInbounceInDown
bounceInLeftbounceInRightbounceInUpbounceOut
bounceOutDownbounceOutLeftbounceOutRightbounceOutUp
fadeInfadeInDownfadeInDownBigfadeInLeft
fadeInLeftBigfadeInRightfadeInRightBigfadeInUp
fadeInUpBigfadeOutfadeOutDownfadeOutDownBig
fadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBig
fadeOutUpfadeOutUpBigflipInXflipInY
flipOutXflipOutYlightSpeedInlightSpeedOut
rotateInrotateInDownLeftrotateInDownRightrotateInUpLeft
rotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRight
rotateOutUpLeftrotateOutUpRighthingejackInTheBox
rollInrollOutzoomInzoomInDown
zoomInLeftzoomInRightzoomInUpzoomOut
zoomOutDownzoomOutLeftzoomOutRightzoomOutUp
slideInDownslideInLeftslideInRightslideInUp
slideOutDownslideOutLeftslideOutRightslideOutUp
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

相关推荐