页面模块动画加载，根据wowjs和animate动画结合使用

1. 安装
   npm install wowjs --save
   (animate.css会被自动安装，但是这里有坑)
2. 在main.js中引入animate.css
3. import 'wowjs/css/libs/animate.css'
   引入时需要注意看是引入的哪个animate.css文件，在后面有详细讲解。
4. 引入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>