輕鬆製作 css 的動畫效果- Animate.css

animate.css 是一個幫我們做好許多內建的 CSS3 效果的動畫庫，簡單的把 css 檔讀入後再照著文件說明使用就可以把效果加到頁面上了。

連結：animate.css

使用方法：

1. 透過 npm 安裝：

$ npm install animate.css --save

或 yarn

$ yarn add animate.css

2. 下載或使用 cdn

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

接著只要在想要做動畫的元素上加上 animated 的 class，再加上以下他設計好的效果的 class 就可以了。

如果想要讓動畫可以無限播放，只要再加上 infinite 這個 class 即可。

要將 class name 透過 js 加到元素上的話可以參考以下寫法：

const element =  document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')

如果想要可以重複點擊觸發動畫，可以偵測動畫結束時的事件如下：

const element =  document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')

element.addEventListener('animationend', function() { doSomething() })

寫成可以通用的 function：

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
})