vue项目配合wowjs使用时常见的问题总结

写在前面

wowjs地址这里先简单的说一下，这个js是用来做动画的，最常用的场景是公司的官网，可以做的相对比较炫酷，他其实就是封装了animate.css的动画进行一些操作，他的使用官方给的demo完全够用，包括和vue在一起使用的过程也很全，但是和vue在一起使用的时候很多的坑，所以今天这篇文章就是为了将和vue一起使用的坑填满！

vue中引入

npm install wowjs --save-dev

• 这里简单的说一下，这里我们引入了wowjs以后，animate.css已经安装了，我们完全可以不用再安装animate.css

问题1 [animate路径不对]

很多人这里就直接在mainjs中引入了wowjs和animate，比如这样（下面的截图是错误的配置）：(下面的配置截图生效的前提是安装了animate并且版本一致的情况)

这里虽然wowjs里面包含animate，我们需要正确的引入它自带的才可以，不然你会发现没有wowjs的任何效果，正确的配置应该是：

import Vue from 'vue'
import wow from 'wowjs'
import 'wowjs/css/libs/animate.css'  //此处就是wowjs中自带的animate的位置
Vue.prototype.$wow = wow

问题2 [animate和wowjs版本不对]

很多人非要用animate官方的，我们可以自己安装animate地址

npm install animate.css

• 这里安装以后就可以直接在mainjs中import ‘animate.css’，但是不一定可以用，这里会存在一个和wowjs版本冲突的问题，如果你引入的animate刚好和wowjs支持的版本一致，那就没问题，运气可以，但是如果不能用，也不用怀疑你的animate或者wowjs有问题，都是好的，只是版本冲突了，这时候需要自己引入wowjs本地自带的animate文件就可以了，就是坑1的方案

问题3 [异步处理问题]

如果上面两个你都可以了，但是还是没有效果，那就是现在的这个问题了，也就是我们处理异步请求的时候，在请求回来之前动画已经加载结束了，我这么说可能不是很明白，我给你们看一下代码，比如很多博主写的都是说的下面的这种引入方式：

import WOW from 'wowjs'   
mounted() { new WOW.WOW().init() }

• 或者

 import {WOW} from 'wowjs'    
 mounted() { new WOW().init() }

这两种引入方式本身都是没问题的，但是这个是你的数据和dom都已经加载结束的前提下，也就是说配合一般情况下是可以的，很多人到这也就基本实现了，但是如果你的还不行的话就说明属于特殊情况了，就要在接口请求结束进行初始化wowjs了，比如我们可以这样写

getresourcefield_func() {
        getresourcefield().then(_ => {
          this.resourcefieldList = _.data.items
        }).then(_ => {
          new this.$wow.WOW().init()
        }).catch(_ => {
          console.error(_)
        })
      }

这样在保证了数据结束以后初始化wowjs就可以有效果了！

如何使用

上面讲的都是常见的问题，具体怎么使用呢？前面怎么引入已经说了，具体用什么效果这里可以看一下这篇文章，直接在我们的标签上使用就好了
效果描述

wowjs配置文件及说明

var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init();