vuejs(cli)中使用wowjs

發表於 | 更新於 | 分類於

前言

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

Animate.css
wowjs

WOWJS

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

1
npm install animate wowjs --save

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

1
2
3
4
5
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 即可。

1
2
3
4
5
6
7
8

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 說明是寫異步加載的內容是否有效
0%