循序漸進BootstrapVue，開發公司入口網站（2）--- 使用wow.js動畫元件以及自定義的CSS樣式處理動態效果

我們使用的時候，使用npm安裝它，並匯入相應的動畫樣式檔案即可。

npm install wowjs --save-dev

安裝後，在vue專案的main.js中全域性引入樣式檔案

//引入wowjs所需

import 'wowjs/css/libs/animate.css' //此處就是wowjs中自帶的animate的位置

HTML頁面程式碼使用動畫的時候，新增對應的類屬性即可，如下所示。

  <section class="wow slideInLeft"></section>

  <section class="wow slideInRight"></section>

如我們實際很多頁面都用了動畫效果，程式碼如下所示，紅框部分就是WOW動畫所需的一些屬性設定。

類名前面的wow是每一個帶動畫的元素都要加的，slideInLeft就是說明動畫樣式。後面的data-wow-duration（動畫持續時間）、data-wow-delay（動畫延遲時間）、data-wow-offset（元素的位置露出後距離底部多少畫素執行）和data-wow-iteration（動畫執行次數）這四個屬性可選可不選。

data-wow-duration：更改動畫持續時間
data-wow-delay：動畫開始前的延遲
data-wow-offset：開始動畫的距離（與瀏覽器底部相關）
data-wow-iteration：動畫的次數重複（無限次：infinite）

WOW的指令碼初始化，有些人放在了main.js裡面定義WOW變數，也有些人在具體頁面中定義WOW變數，並初始化，都可以實現效果。

WOW可以用import也可以用require進行匯入定義使用。

if (process.browser) { // 在這裡根據環境引入wow.js

  var { WOW } = require('wowjs')

}

或者

 import {WOW} from 'wowjs'   

如果需要自定義配置，可如下使用：

var wow = new WOW({

    boxClass: 'wow',

    animateClass: 'animated',

    offset: 0,

    mobile: true,

    live: true

});

要頁面出現動畫效果，那麼就必須初始化WOW

一般的初始化程式碼如下所示，這個放在mounted函式裡面，就是需要等待所有頁面元件完成載入後出現動畫，或者滑鼠滾動到指定的模組，也出現相應的動畫效果。

  mounted () {

    //為了避免非同步無法重新整理，使用了同步方式await

    this.$nextTick(() => {

      if (process.browser) {

        new WOW({ live: false }).init()

      }

    })

  },

圖片動畫效果如下所示

        <b-card class="overflow-hidden my-2">

          <b-row no-gutters>

            <b-col cols="4" class="px-2">

              <b-card-img :src="item.icon" class="rounded-circle"></b-card-img>

            </b-col>

            <b-col cols="8">

              <b-card-body class="p-2">

                <b-card-title class="text-truncate">{{item.title}}</b-card-title>

                <b-card-text class="card-body-text text-muted text-justify">{{item.desc}}</b-card-text>

              </b-card-body>

            </b-col>

          </b-row>

          <!-- 蒙版 -->

          <div class="mask">

            <b-button variant="outline-info" class="mx-auto d-block my-btn" @click="handleDetail(item.id)">瞭解更多</b-button>

          </div>

        </b-card>

.card {

  position: relative;

  .mask {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    display: none;

    align-items: center;

    text-align: center;

    background: rgba(0, 0, 0, 0.8);

  }

}

.card:hover {

  box-shadow: 0 0 10px #ccc;

  .mask {

    display: flex !important;

  }

}

.card {

  border: none;

}

.card:hover {

  // background: #F1F1F1;

  box-shadow: 0 0 10px #ccc;

}

.single_about:hover {

  box-shadow: 0 3px 45px 0 rgba(0, 0, 0, 0.2);

  z-index: 999;

}

<style scoped>

.card img {

  width: 100%;

  -webkit-transform: scaleY(1);

  -moz-transform: scaleY(1);

  -o-transform: scaleY(1);

  -ms-transform: scaleY(1);

  transform: scaleY(1);

  -webkit-transition: all 0.7s ease-in-out;

  -moz-transition: all 0.7s ease-in-out;

  -o-transition: all 0.7s ease-in-out;

  -ms-transition: all 0.7s ease-in-out;

  transition: all 0.7s ease-in-out;

}

.card img:hover {

  -webkit-transform: scale(1.5);

  -moz-transform: scale(1.5);

  -o-transform: scale(1.5);

  -ms-transform: scale(1.5);

  transform: scale(1.5);

}

</style>

mask: linear-gradient(90deg, transparent, #fff);