vuejs(cli)中使用wowjs
前言
最近正在製作一個小作品,因為是使用 Vue Cli 開發,這邊紀錄一下該如何在 Vue Cli 中使用 WOWJS
WOWJS
基本上 WOWJS 都會搭配 Animate.css,所以先到達專案目錄在輸入以下指令。
1 | npm install animate wowjs --save |
安裝完畢後,開啟 main.js (進入點)增加兩段程式碼。
1 | import 'animate.css'; |
接下來就可以在 Vue 中使用了,可以試著將以下程式碼丟進各 components 中試試看。
1 | <div class="wow slideInUp"> |
補充
若要調整 wow 的延遲、持續時間、開始動畫距離及重複次數可以這樣寫。
1 | <div class="wow slideInUp" data-wow-delay="2s"> |
基本上 wow 是透過利用 【data-wow-*】 來控制的,下面附上相關設置。
data-wow-duration: 動畫持續時間
data-wow-delay: 動畫延遲
data-wow-offset: 開始動畫距離
data-wow-iteration: 動畫重複次數(無限>infinite)
如果要更改動畫庫的話,只需要這樣去修改 main.js 中的 wow 即可。
1 |
|
配置說明
屬性 | 類型 | 默認 | 說明 |
---|---|---|---|
boxClass | 字串 | WOW | 要執行動畫的元素class,預設是WOW |
animateClass | 字串 | animated | 預設是載入animated.css |
offset | 整數 | 0 | 距離可見區域多少開始動畫(與瀏覽器底部有關,通常是滑到畫面中央) |
mobile | 布林值 | true | 手機上是否執行動畫 |
live | 布林值 | true | 說明是寫異步加載的內容是否有效 |