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();

在这里插入图片描述

何处锦绣不灰堆 CSDN认证博客专家 vue nodejs git
人系于妻子舍宅,甚于牢狱。牢狱有散释之期,妻子无远离之念。情爱于色,岂惮驱驰。虽有虎口之患,心存甘伏。投泥自溺,故曰凡夫。透得此门,出尘罗汉。
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值