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%