vue动画效果

1、通过npm安装wowjs和animate.css

npm install wowjs --save -dev
npm install animate.css --save

这里有个坑 直接这样安装 animate版本太高 没有效果，安装这个版本没问题"animate.css": "^3.7.2"

2、在main.js中引入animate.css

import 'animate.css'

也可以直接下载animate.min.css文件放到项目静态资源目录，然后在main.js里面引用：import '@/styles/animate.min.css'

3、在需要使用的文件中局部引入wowjs，并在mounted实例化wow这个对象

<script>
import { WOW } from 'wowjs'
export default {
  name: 'Home',
  data() {
    return {}
  },
  mounted() {
    this.$nextTick(() => {
      // 在dom渲染完后,再执行动画
      const wow = new WOW({
        live: false
      })
      wow.init()
    })
  }
}
</script>

4、在需要使用动画效果的标签中添加wow样式

<div class="m_con wow  fadeInLeft"></div>

类名前面的wow是每一个带动画的元素都要加的，slideInLeft就是说明动画样式。后面的data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可选可不选。

<div class="wow bounce " data-wow-delay="1.5s" data-wow-iteration："1"></div>

5、wow.js效果实例显示 点击查看