- 安装
npm install wowjs --save
(animate.css会被自动安装,但是这里有坑) - 在main.js中引入animate.css
import 'wowjs/css/libs/animate.css'
引入时需要注意看是引入的哪个animate.css文件,在后面有详细讲解。- 引入wow.js并初始化,页面直接引入
import {WOW} from 'wowjs'
mounted () {
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 20,
mobile: true,
live: true,
})
wow.init()
}
页面代码
四个属性:
data-wow-duration(动画持续时间)
data-wow-delay(动画延迟时间)
data-wow-offset(元素的位置露出后距离底部多少像素执行)
data-wow-iteration(动画执行次数)
<template >
<div >
<div class="text text1 wow bounceInLeft animated" data-wow-duration="2s" data-wow-delay="2s" >
213123
</div>
<div class="text text2 wow bounceInLeft animated" data-wow-duration="2s" data-wow-delay="2s" >
213123
</div>
<div class="text text3 wow bounceInRight animated" data-wow-duration="2s" data-wow-delay="2s" >
213123
</div>
<div class="text text4 wow bounceInRight animated" data-wow-duration="2s" data-wow-delay="2s" >
213123
</div>
<div class="text text5 wow bounceInRight animated" data-wow-duration="2s" data-wow-delay="2s" >
213123
</div>
</div>
</template>
样式随便写的效果比较明显
<style scoped>
.text{
height: 600px;
width: 100%;
}
.text1{
background-color: #222222;
}
.text2{
background-color: #f6bb05;
}
.text3{
background-color: #20a0ff;
}
.text4{
background-color: #2CB65A;
}
.text5{
background-color: #00B6BE;
}
</style>