vue中使用 wow.js 动画插件

1. 安装

npm install wowjs --save

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

官网地址：wowjs

animate.css

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

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

3. 引入wow.js并初始化

这里方法有二

方法1

在main.js中添加

import wow from ‘wowjs’

Vue.prototype.$wow = wow

在组件中

new this.$wow.WOW().init()

方法2

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

有两种使用方式：

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

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.比如设置进入动画时，元素会先显示出来，然后再过延迟时间后执行进入动画。

可以加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）属性，如.（在css下方js上方写需要动画的元素（必须设置为块状或者行内块状！必须设置为块状或者行内块状！必须设置为块状或者行内块状！），并添加class类名。)

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"  data-wow-iteration="10"></div>

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

　专门测试了一下data-wow-offset和data-wow-iteration这两个属性，其中data-wow-offset="数值"中的数值是动画完成后元素距离显示器底部的位置，而不是距离浏览器窗口底部的位置。

5、wow.js 使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。

<script src="http://www.bbsxiaomi.com/js/wow.min.js"></script><script>if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){new WOW().init();};</script>

6、也可以自定义wow.js

<script src="http://www.bbsxiaomi.com/js/wow.min.js"></script>var wow = new WOW({boxClass: 'wow',animateClass: 'animated',offset: 0,mobile: true,live: true});wow.init();

属性/方法	类型	默认值	说明
boxClass	字符串	‘wow’	需要执行动画的元素的 class
animateClass	字符串	‘animated’	animation.css 动画的 class
offset	整数	0	距离可视区域多少开始执行动画
mobile	布尔值	true	是否在移动设备上执行动画
live	布尔值	true	异步加载的内容是否有效

增加顺序动画

在标签上增加

 data-wow-delay="0.3s"

vue中使用 wow.js 动画插件相关推荐

前端插件 -- WOW.js动画插件
WOW.js动画插件有的页面在向下滚动的时候,有些元素会产生细小的动画效果.比如需要做到滚动条滑到某个位置时,才能显示动画.wow.js 依赖 animate.css,所以它支持 animate.c ...
vue中使用wow.js
首先安装wow npm install wowjs --save-dev animate.css会自动安装在 main.js中引用 require('animate.css/animate.mi ...
在VUE中使用wow.js
第一步:安装插件 npm install wowjs --save-dev 第二步:引入的main.js中 import animated from 'animate.css' import 'wow ...
vue 2.x中使用wow.js
安装 npm install wowjs --save animate.css 会被自动安装也可以手动安装 animate.css npm install animate.css --save 引入 ...
【vue】用WOW.js+animate.css实现页面滚动加载元素动画
一.场景在很多的网站中,我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的,这样看起来页面更具有活力,增加用户体验.当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的 ...
vue中通过monment.js插件来将时间戳转换为常用的时间格式
vue中通过monment.js插件来将时间戳转换为常用的时间格式在项目中很多时候需要展示时间信息,我们一般都是用时间戳来传输时间信息,但是我们在页面展示的话是我们想要的常见格式,比如:2021-4 ...
vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 12 ...
vue js 定义对象_JS标准内置对象Proxy及Vue中的proxy.js文件
昔登铜井望法华,葱茏螺黛浮蒹葭.今登法华望铜井,湖水迷茫烟色瞑.-- <登法华寺山顶> Proxy是什么 Proxy是JS标准内置对象中的一个对象.用于创建一个对象的代理.从而实现对对象操 ...
vue中解决three.js出现内存泄漏丢失上下文问题
vue中解决three.js出现内存泄漏丢失上下文问题参考文章: (1)vue中解决three.js出现内存泄漏丢失上下文问题 (2)https://www.cnblogs.com/lichuank ...

vue中使用 wow.js 动画插件

vue中使用 wow.js 动画插件相关推荐

最新文章

热门文章