animate.css动画库+wow.js实现滚动到可视区域显示动画

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.好了大功告成！可以去看效果了。