animate.css 是一個來自國外的 CSS3 動畫庫妖胀,它預(yù)設(shè)了抖動(shake)叔锐、閃爍(flash)知纷、彈跳(bounce)媳拴、翻轉(zhuǎn)(flip)幔翰、旋轉(zhuǎn)(rotateIn/rotateOut)牡整、淡入淡出(fadeIn/fadeOut)等多達 60 多種動畫效果惦蚊,幾乎包含了所有常見的動畫效果幽歼。
官網(wǎng):https://daneden.github.io/animate.css
github:https://github.com/daneden/animate.css
WOW.js可以在頁面向下滾動的過程中播放這些動畫效果导饲,還可以為動畫設(shè)置喜歡的風(fēng)格捞高、延遲、長度渣锦、偏移和迭代等硝岗。
官網(wǎng):http://mynameismatthieu.com/WOW
github:https://github.com/matthieua/WOW
在webpack中使用也很簡單,按如下步驟操作即可:
1.首先使用npm安裝wowjs
npm install wowjs --save-dev
animate.css會自動安裝袋毙。
2.在js文件中添加如下代碼
import 'animate.css'
import {WOW} from 'wowjs';
new WOW({live: false}).init();
如果不添加live: false
型檀,控制臺會提示:MutationObserver is not supported by your browser. & WOW.js cannot detect dom mutations, please call .sync() after loading new content.
。
參考:
1.https://stackoverflow.com/questions/35099440/wow-js-with-webpack-and-react
2.https://github.com/matthieua/WOW/issues/234