循序渐进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);