本文轉自：https://blog.csdn.net/liyunkun888/article/details/85003152
https://www.zhuimengzhu.com/content/article/id/87.html
一、場景
在很多的網站中，我們發現在滾動條滑動的時候一些元素顯示出來的時候是有一些動畫效果的，這樣看起來頁面更具有活力，增加用戶體驗。當然這些動畫我們可以通過判斷滾動條的位置或者判斷元素距離可視窗口的距離自己寫一些動畫來實現，但是當頁面的動畫元素過多的時候，難免有點繁瑣，所以本篇博客介紹使用 WOW.js 和 animate.css 來實現頁面滾動加載元素動畫
二、引入和使用
引入和使用分為兩種，一種是標簽直接引入即可，另外一種就是 vue-cli 搭建的項目用npm安裝引入
第一種很簡單，不過多介紹，主要說 vue-cli 中的引入
1.npm 安裝 wow.js，安裝后 animate.css 會自動安裝
npm install wowjs --save-dev
2.在 main.js 中引入 animate.css
import 'animate.css'
3.在需要的組件中引入 wow.js
import { WOW } from 'wowjs'
mounted(){new WOW().init();}//參數配置都是默認的話，有這句即可。第四步可不加。
4.在 mounted() 生命周期鈎子中初始化
mounted(){
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true
})
wow.init();
}
5.在需要動畫的元素上面加上類名 wow 和 animation.css 動畫的 class 即可，還可以加上 data-wow-duration（動畫持續時間）、data-wow-delay（動畫延遲時間）、data-wow-offset（元素的位置露出后距離底部多少像素執行）和 data-wow-iteration（動畫執行次數）這四個屬性可選可不選
<div class="wow slideInUp" data-wow-duration="1s" data-wow-delay="1s" ></div>
