vue中使用wow.js

首先 安装wow

npm install wowjs --save-dev

animate.css会自动安装

在 main.js中 引用

require('animate.css/animate.min.css');
import {WOW} from 'wowjs'
Vue.prototype.$wow = 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() + ">")
  }
})

我这边是直接弄成全局的，省的每个组件再引用一次，也不用每次写配置，如果用的地方少，可以单独在组件中引用配置

不要在main.js中 init() 因为vue中还没有渲染，会报找不到dom操作
所以到组件中 mounted中 init

mounted() { 
	this.$wow.init()
}

异步加载的话 使用watch

watch: {
  xxxx() {
    this.$nextTick(() => { // 在dom渲染完后,再执行动画
     		this.$wow.init()
    })
  }
}

最后按照wow的使用方式 加入class 就可以了

<div class=" wow slideInUp">xxxxxxxxxx</div>