wow.js官网:Reveal Animations When Scrollingwww.delac.io
wow.js GitHub地址:https://github.com/matthieua/WOWgithub.com
第一步:安装wow.js NPM包:
在命令行中执行:
npm install animate.css --save
第二步:引入及使用:
在main.js中引入:
// 省略部分代码
import wow from 'wowjs'
import 'animate.css'
Vue.prototype.$wow = wow
// 将wow挂载到Vue,这样我们可以在组件中通过this.$wow使用wow.js。
// 当然也可通过在组件中使用import wow from 'wowjs' 或者import {wow} from 'wowjs'来使用。
在vue页面中使用:
<!-- template -->
<div class="hello_world" >
<section class="wow slideInLeft" data-wow-duration="1s" >
</section>
<section class="wow slideInLeft" data-wow-duration="2s" >
</section>
<section class="wow slideInLeft" data-wow-duration="1s" >
</section>
<section class="wow slideInLeft" data-wow-duration="2s" >
</section>
<section class="wow slideInLeft" data-wow-duration="1s" >
</section>
</div>
// script
export default {
name:'Home',
data() {
return {
}
},
mounted(){
new this.$wow.WOW().init()
}
}