入場動畫是Module主題早期規(guī)劃并在4年前就做了開發(fā)的功能，后面由于某些原因暫時擱置了所以沒有最終上線，近期再次將此功能納入開發(fā)計劃，不過之前開發(fā)使用的動畫庫AOS似乎也依然停留在之前的版本，5年了都沒有再次更新維護?？紤]到如果依然使用AOS方案的話后續(xù)可能存在很大的不確定性，所以我們更換為Animate.css，并對功能代碼進行了重新開發(fā)。

Animate.css是一個css動畫庫，主要提供動畫效果，和AOS相比沒有提供完善的事件監(jiān)聽以及自動處理加載動畫效果，好處是代碼也會更輕量，便于我們基于自身業(yè)務(wù)進行改造和功能的開發(fā)，代碼量在代碼層面壓縮后僅增加十幾kb左右，如果服務(wù)器開啟Gzip壓縮會更小。

使用說明

1、進入可視化編輯器

入場動畫是針對模塊的功能，所以需要進入對應(yīng)頁面的可視化編輯器，比如后臺-頁面-找到需要編輯的頁面-鼠標(biāo)鼠標(biāo)移入-點擊可視化編輯器；

2、進入模塊編輯

添加或者編輯需要應(yīng)用入場動畫的模塊，在風(fēng)格樣式選項卡下面找到入場動畫選項。

如果未找到則表示當(dāng)前模塊還未支持入場動畫功能，比如全寬模塊、柵格模塊等，這類模塊主要用于放置其他模塊，所以動畫效果建議直接添加在內(nèi)部模塊里面即可。

3、設(shè)置入場動畫

找到入場動畫選項，先打開右側(cè)開關(guān)開啟動畫功能，然后依次設(shè)置動畫效果和動畫時長選項。

其中動畫效果由于命名的問題很難做到看名字就能理解具體效果，所以并未做翻譯，而是直接將對應(yīng)的動畫效果附加在名稱上，只需要將鼠標(biāo)移入對應(yīng)動畫效果名稱上就會自動播放，做到簡單直觀。

動畫時長單位是毫秒（ms）,1秒=1000毫秒，填寫數(shù)字即可，無需單位。如果對于設(shè)置的值不確定是否合適，也可以返回去動畫效果選項通過鼠標(biāo)移入觸發(fā)看下具體效果。

4、保存發(fā)布

依次設(shè)置頁面需要使用入場動畫效果的模塊，設(shè)置完畢以后點擊右上角發(fā)布按鈕保存頁面即可。

效果展示

目前我們對Module主題部分演示站也做了入場動畫效果的升級，有興趣可以查看風(fēng)格9-12的演示站首頁：https://demo.wpcom.cn/preview/module