vuejs(cli)中使用wowjs

發表於 2019-05-08 更新於 2020-12-27 分類於 Vue

最近正在製作一個小作品，因為是使用 Vue Cli 開發，這邊紀錄一下該如何在 Vue Cli 中使用 WOWJS

前言

最近正在製作一個小作品，因為是使用 Vue Cli 開發，這邊紀錄一下該如何在 Vue Cli 中使用 WOWJS

基本上 WOWJS 都會搭配 Animate.css，所以先到達專案目錄在輸入以下指令。

1	npm install animate wowjs --save

安裝完畢後，開啟 main.js (進入點)增加兩段程式碼。

import 'animate.css';
import WOW from 'wow.js';

// 這行是重點，否則wow不會正常運作。
new WOW({ live: false }).init();

接下來就可以在 Vue 中使用了，可以試著將以下程式碼丟進各 components 中試試看。

1
2
3

<div class="wow slideInUp">
測試wow
</div>

若要調整 wow 的延遲、持續時間、開始動畫距離及重複次數可以這樣寫。

1
2
3

<div class="wow slideInUp" data-wow-delay="2s">
測試wow
</div>

基本上 wow 是透過利用【data-wow-*】來控制的，下面附上相關設置。

data-wow-duration：動畫持續時間
data-wow-delay：動畫延遲
data-wow-offset：開始動畫距離
data-wow-iteration：動畫重複次數（無限>infinite）

如果要更改動畫庫的話，只需要這樣去修改 main.js 中的 wow 即可。


new WOW({
  boxClass: 'wow',
  animateClass: 'animated',
  offset: 0,
  mobile: true,
  live: true,
}).init();

配置說明

屬性	類型	默認	說明
boxClass	字串	WOW	要執行動畫的元素class，預設是WOW
animateClass	字串	animated	預設是載入animated.css
offset	整數	0	距離可見區域多少開始動畫(與瀏覽器底部有關，通常是滑到畫面中央)
mobile	布林值	true	手機上是否執行動畫
live	布林值	true	說明是寫異步加載的內容是否有效