1.安装animate.css动画库

npm install animate.css ;

2.安装wow.js

  npm install wowjs --save

3.在mian.js导入

import 'animate.css'//导入animate.css
import wow from 'wowjs'//全局导入wow.js
Vue.prototype.$wow = wow //全局注册到Vue实例中

 4.在组件中使用(定义mouted使得组件在渲染之前挂在wowjs)

mounted () {
    new this.$wow.WOW().init({//新建实列
      boxClass: 'wow',//class名字
      animateClass: 'animate__animated',//animateclass动画库类名,和当前animate动画库决定
      offset: 0,//到元素距离触发动画(当默认为0)
      mobile: true,//在移动设备上触发动画(默认为true)
      live: true//对异步加载的内容进行操作(默认为true)
    })
  },

5.在元素上使用(结合animate动画库使用)

例:

 <div class="wow animate__animated animate__fadeInLeftBig">
//animate__animated(基础类名,跟随animate_animated动画库说明)
//animate__fadeInLeftBig(动画效果类名)

6.好了大功告成!可以去看效果了。

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐