本文發(fā)布于 2023.05.30。

Animate.css 是一個純 CSS 動畫庫 ，需要配合 JS 才能自由地讓某些元素隨時動起來。

官網(wǎng)：https://animate.style/

使用（直接 HTML 中添加）

在 html 文件中引入動畫庫樣式文件。

接著給我們希望運動地元素加上類名 animate__animated，并跟上任何動畫名稱（不要忘記 animate__ 前綴?。Ｉ鲜鑫覀兘o <h1> 增加了左右搖擺地效果。

注意，因為動畫會造成元素偶爾會離開視口范圍，導(dǎo)致出現(xiàn)滾動條，所以我們給父元素加了 overflow: hidden 避免這個問題，這也是通常做法。

JS 控制

為了實現(xiàn)更靈活的操作，我們就要借助 JS 了。

修改 HTML 結(jié)構(gòu)：

我們最開始可能會這么寫：

這種是沒效果的！這是因為 .remove() 和 .add() 是同步代碼，代碼執(zhí)行完畢后開始 UI 渲染，對瀏覽器來說，元素 e 的類名前后并無變化，因此動畫不會生效。

不急，下面我們提供了三種讓動畫生效的方式。

三種讓動畫生效的方式

方式一：強制刷新

.remove() 后，訪問 e.offsetWidth 會觸發(fā)瀏覽器強制刷新；再設(shè)置 .add() 會在下一次繪制中生效，所以動畫會生效。

方式二：下一幀中刷新

.remove() 后，我們將 .add() 操作通過 requestAnimationFrame 回調(diào)方式放入下一幀中渲染。

方式三：通過 animationend 事件

這里不再需要每次動畫時，先移除動畫類名，而是在當(dāng)次動畫結(jié)束時移除。與前兩種實現(xiàn)方式區(qū)別在于，第三種方式會讓動畫完整結(jié)束，而前兩種會中斷當(dāng)次動畫、并重新開始新的動畫。

綜合來看，方式三更好一些。

封裝可復(fù)用方法

我們這里封裝一個 animateCSS()——方便復(fù)用——用來給某個特定元素指定動畫效果：

animateCSS() 接收選擇器字符串（CSS Selector）作為參數(shù)，運動元素。這里有兩點需要注意：

• 我們?yōu)樵靥砑邮录r .addEventListener 使用的是單次生效事件，這樣就不必做 .removeEventListener ?處理了。

• animationend 事件中，我們使用了 event.stopPropagation() 阻止了事件向上冒泡。

animateCSS() 使用方式如下：

注意事項

• 行內(nèi)元素不支持動畫。在對內(nèi)聯(lián)級元素進行動畫處理時，可以將元素設(shè)置為 display: inline-block

• 大多數(shù) Animate.css 動畫將在屏幕上移動元素，并可能會在你的網(wǎng)頁產(chǎn)生滾動條。使用 overflow: hidden 屬性可以避免網(wǎng)頁被撐大出現(xiàn)滾動條的問題。