前端学习圈

animate.css使用方法

一、引入

  1. 官网： https://daneden.github.io/animate.css/；

  2. 官方cdn

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
  1. 使用方法

打开官网，查看需要的动画名称，上面的名称就是动画的类名，直接写上类名和animated类名即可；

<div class='animated bounce'></div>
  1. 可用的类名 infinite，无限循环；

delay-2s；修改动画的延迟出现的时间；

delay-2s/3s/4s/5s；animate定义的延迟类名；需要自定义延迟可以添加到css里面；

控制动画速度：.slow(2s)，.slower(3s)，.fast(800ms)，.faster(500ms)；（小括号是说明，不要加小括号）

  1. 给动画添加回调函数
const element = document.querySelector('div');
element.addEventListener('animationed',function(){
    alert('动画完成')
})
  1. 使用下面函数进行简单添加删除动画
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)
}

使用时：animateCSS('div','fadeIn',function(){alert('动画完成')})；回调函数可写可不写；