wow.js可以在頁面向下滾動(dòng)時(shí)加載css動(dòng)畫，并且可以觸發(fā)animate.css的動(dòng)畫效果。
wow.jsGitHub地址：https://github.com/matthieua/WOW
wow.js官網(wǎng)：https://www.delac.io/wow/docs.html
在vue中使用：
首先install:
npm install wowjs --save
執(zhí)行完該操作之后animate.css也可以使用了
在main.js中引入
import wow from 'wowjs'
import 'animate.css'
main.js再加入Vue.prototype.$wow=wow逸邦，這樣我們可以在組件中通過this.$wow使用wow.js
當(dāng)然也可通過在組件中使用import wow from 'wowjs' 或者import {wow} from 'wowjs'來使用秽荤。
一個(gè)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>
