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

心已赠人 2022-11-02 11:43 528阅读 0赞

#### 写在前面 ####

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

#### vue中引入 ####

npm install wowjs --save-dev

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

#### 问题1 \[animate路径不对\] ####

> 很多人这里就直接在mainjs中引入了wowjs和animate，比如这样（**下面的截图是错误的配置**）：(下面的配置截图生效的前提是安装了animate并且版本一致的情况)  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70]  
> 这里虽然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[地址][Link 2]

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就可以有效果了！

#### 如何使用 ####

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

#### wowjs配置文件及说明 ####

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 1]

[Link 1]: https://www.dowebok.com/131.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70]: /images/20221024/d6b44a01457f4168ac4b1d8d31294d17.png
[Link 2]: http://www.animate.net.cn/
[Link 3]: https://blog.csdn.net/weixin_30240349/article/details/96487214
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 1]: /images/20221024/a0bb00ed83f64923a45648ed3954b838.png