安装
npm install animate.css --save
npm i wowjs
引入并绑定到原型方法
import 'animate.css'
import wow from 'wowjs'
Vue.prototype.$wow= wow
app.vue中全局使用
mounted() {
let options = {
//默认为true
offset:'150',
live: false
};
new this.$wow.WOW(options).init();
},
在组件上添加类名、使用
<div class="home-banner" data-wow-duration="1s" class="wow.animate__animated animate__fadeInLeft"></div>
类名格式 bounceInLeft 见
https://www.kettle.net.cn/animate/index.html
https://github.com/graingert/wow
.wow.animate__animated.animate__bounceInLeft
.wow.animate__animated.animate__rubberBand
.wow.animate__animated.animate__bounceInRight
.wow.animate__animated.animate__bounceInDown
.wow.animate__animated.animate__fadeInDown
.wow.animate__animated.animate__bounceIn
.wow.animate__animated.animate__flipInX
.wow.animate__animated.animate__slideInDown
.wow.animate__animated.animate__pulse
.wow.animate__animated.animate__fadeInLeft
测试版本:
"vue": "^2.5.17",
"wowjs": "^1.1.3"
"animate.css": "^4.1.1",