輕鬆製作 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 就可以了。

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      

 

如果想要讓動畫可以無限播放,只要再加上 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
})