关于wow.js在vue项目中的使用及遇到的坑

第一次使用wow.js实现页面滚动加载动画。使用过程中主要遇到了两个问题：1. 动画效果无效（后来发现是引用的动画类名问题）2. 设置动画延迟执行遇到会先显示再延迟执行进入效果的问题。也是由于错误使用了动画类名。所以记录一下~

在vue项目中的使用

1. 安装

npm install wowjs --save

(animate.css会被自动安装，但是这里有坑)

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

引入时需要注意看是引入的哪个animate.css文件，在后面有详细讲解。

3. 引入wow.js并初始化

这里方法有二

方法1

在main.js中添加

import wow from 'wowjs'

Vue.prototype.$wow = wow

在组件中

mounted () {

    new this.$wow.WOW({

      live: true

    }).init()

  }

方法2

在要使用的组件中引入wow.js

有两种使用方式：

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

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

4. 使用

在要使用的元素上加上两个类名

基础类名wow和要使用的动画效果类名

四个属性：

data-wow-duration（动画持续时间)

data-wow-delay（动画延迟时间）

data-wow-offset（元素的位置露出后距离底部多少像素执行）

data-wow-iteration（动画执行次数）

这四个属性可选可不选。

参数配置项

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

 

关于在使用中遇到的坑

npm 安装wowjs的时候，自动会安装animate.css，但是css文件在node_modules/wowjs目录下。

当我们使用npm直接安装animate.css时，css文件在node_modules/animate.css目录下。

两个文件的引入方式分别为

这两个文件的区别是，动画效果的类名不相同！！

 

所以在使用的时候注意加以区分！！看自己是引用的哪个css文件，然后引用相应的类名，否则可能会导致动画没有效果。

而且需要注意

当使用的类名有前缀animate__，也就是使用的不是通过安装wowjs时自动安装的animate.css时，wowjs设置的动画延迟属性会有bug.比如设置进入动画时，元素会先显示出来，然后再过延迟时间后执行进入动画。