Wow.js滚动动画

动画，各种动画。

Vue使用Wow插件步骤

• 安装wow插件

npm install wowjs --save

wow包内有animate的css文件，无需再引入animate插件
(wow依赖animate动画库)

• 在main.js文件中引入

import 'wowjs/css/libs/animate.css'

• 组件中引入

import {WOW} from 'wowjs’            //引入
export default {
name: "Wow_vue",
  mounted() {
    this.$nextTick(() => {
      var wow = new WOW({
        boxClass: 'wow', ///动画元件css类（默认为wow）
        animateClass: 'animated', //动画css类（默认为animated）
        offset: 0, //到元素距离触发动画（当默认为0）
        mobile: true, //在移动设备上触发动画（默认为true）
        live: true //对异步加载的内容进行操作（默认为true）
      })
      wow.init()
    });
  }
}

• 元素具体使用

<div style="width: 300px;height: 300px;background: #42b983" 
class="wow fadeInLeftBig" 
data-wow-duration="1s"    #动画持续时间
 data-wow-delay="0s"      #动画延迟时间
data-wow-offset="10"        （元素的位置露出后距离底部多少像素执行）
 data-wow-iteration="infinite"    #动画执行次数,infinite代表无限循环
>
</div>

附资源网址:

https://wowjs.uk/docs.html -wow教程
https://wowjs.uk/ -wow官网
https://victorw999.github.io/demo_1/builds/development/scrollanimation/animate001.html -一个好用的wow演示网站