Animate.css（怎么精细控制呢）

标签：const   属性   bounce   one   html   添加   演示   封装   llb   

动画

效果演示

使用方式

• 添加类

<h1 class="animated infinite bounce duration-2s delay-2s">Example</h1>

• 添加类并自己控制一些属性

<div class='yourElement animated shake'>^_^</div>

.yourElement {
  animation-duration: 3s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

• js方式

//封装方法
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('.my-element', 'bounce')

// or
animateCSS('.my-element', 'bounce', function() {
  // Do something after animation
})

Animate.css（怎么精细控制呢）

标签：const   属性   bounce   one   html   添加   演示   封装   llb   

原文地址：https://www.cnblogs.com/XiaoWinter/p/12187438.html