[JavaScript知识库]vue中使用woo.js + animate.css

安装

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",