vue 2.x中使用wow.js

安装

npm install wowjs --save

animate.css 会被自动安装
也可以手动安装 animate.css

npm install animate.css --save

引入

方法一、main.js 中直接引入

import wow from 'wowjs'
import 'wowjs/css/libs/animate.css';
Vue.prototype.$wow = wow

在子组件中使用

//new this.$wow.WOW().init()
//或者
var wow = new this.$wow.WOW({
  boxClass: 'wow',
  animateClass: 'animated',
  offset: 0,
  mobile: true,
  live: true
});
wow.init();

方法二、 直接在子组件中使用wow.js

import { WOW } from 'wowjs'
mounted() { 
	new WOW().init() 
}

使用中wow.js 的四个属性

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

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

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

data-wow-iteration（动画执行次数）（无限次：infinite）

//<div data-wow-delay="2s" data-wow-duration="3s" class="wow fadeInDown right"> 示例

可写可不写根据自己需求

参数配置
new WOW({
boxClass: ‘wow’, // default
animateClass: ‘animated’, // default
offset: 150, // default
mobile: true, // default
live: true, // default
callback: function(box) {
console.log(“WOW: animating <” + box.tagName.toLowerCase() + “>”)
}
})

注意

当我们使用npm直接安装animate.css时 和引入的wow.js 连带下载的路径是不同的

import 'animate.css'

所以在使用的时候注意加以区分！！看自己是引用的哪个css文件，然后引用相应的类名，否则可能会导致动画没有效果。

而且需要注意

当使用的类名有前缀animate__，也就是使用的不是通过安装wowjs时自动安装的animate.css时，wowjs设置的动画延迟属性会有bug.比如设置进入动画时，元素会先显示出来，然后再过延迟时间后执行进入动画。