wow.js可以在页面向下滚动时加载css动画，并且可以触发animate.css的动画效果。
wow.jsGitHub地址：https://github.com/matthieua/WOW
wow.js官网：https://www.delac.io/wow/docs.html
在vue中使用：
首先install:
npm install wowjs --save
执行完该操作之后animate.css也可以使用了
在main.js中引入
import wow from 'wowjs'
import 'animate.css'
main.js再加入Vue.prototype.$wow=wow，这样我们可以在组件中通过this.$wow使用wow.js
当然也可通过在组件中使用import wow from 'wowjs' 或者import {wow} from 'wowjs'来使用。
一个vue组件列子：
<template>
<div class="test_wow" >
<section class="wow slideInLeft test_wow" data-wow-duration="1s" >
</section>
<section class="wow slideInLeft test_wow1" data-wow-duration="2s" >
</section>
<section class="wow slideInLeft test_wow2" data-wow-duration="1s" >
</section>
<section class="wow slideInLeft test_wow3" data-wow-duration="2s" >
</section>
<section class="wow slideInLeft test_wow4" data-wow-duration="1s" >
</section>
</div>
</template>
<script>
export default {
name:'Home',
data() {
return {
}
},
mounted(){
new this.$wow.WOW().init()
}
}
</script>
<style scoped>
.test_wow{
position: relative;
width: 1000px;
height: 400px;
background: #212121;
margin: 0 auto;
}
.test_wow1{
position: relative;
width: 1000px;
height: 400px;
background: #741919;
margin: 0 auto;
}
.test_wow2{
position: relative;
width: 1000px;
height: 400px;
background: #2b0f44;
margin: 0 auto;
}
.test_wow3{
position: relative;
width: 1000px;
height: 400px;
background: #558614;
margin: 0 auto;
}
.test_wow4{
position: relative;
width: 1000px;
height: 400px;
background: #440707;
margin: 0 auto;
}
</style>
网友评论