vue中引入及使用wow.js

1. 安装

npm install animate.css --save
npm install wowjs --save

2. main.js全局引入

import "animate.css"
import "wowjs/css/libs/animate.css"// 巨坑... 此地方要引入两个css
import wow from 'wowjs'
Vue.prototype.$wow = wow

3. 在相应的组件中使用

 <div class="container">
      <div class="service_box">
          <div class="service_item wow animate__backInDown" data-wow-delay="0s">
              <div class="service_photo">
                  <img src="../assets/img/floor1-01.png" />
              </div>
          </div>
          <div class="service_item wow animate__backInDown" data-wow-delay="0.08s">
              <div class="service_photo">
                  <img src="../assets/img/floor1-02.png" />
              </div>
          </div>
          <div class="service_item wow animate__backInDown" data-wow-delay="0.16s">
              <div class="service_photo">
                  <img src="../assets/img/floor1-03.png" />
              </div>
          </div>
      </div>
 </div>

// 生命周期里 初始化wow插件
mounted() {
    new this.$wow.WOW().init()
}

动画效果-class名链接
链接: https://animate.style/.

4个属性：

data-wow-duration（动画持续时间)

data-wow-delay（动画延迟时间）

data-wow-offset（元素的位置露出后距离底部多少像素执行）

data-wow-iteration（动画执行次数）