简介
众所周知,animate.css是非常优秀的CSS3动画库,不依赖于jQuery,纯CSS动画,但是不兼容IE8及以下版本,就算用jq控制,性能也不是很好。
wowjs向下滚动页面时显示CSS动画。默认情况下,您可以使用它来触发animate.css动画。但您可以轻松地将设置更改为您喜欢的动画库。
wowjs好处:
- 比其他JavaScript视差插件更小,比如Scrollorama(它们做的很棒,但对于简单的需求可能太重了)
- 安装超级简单,并且与animate.css一起使用,因此如果您已经使用它,那么设置起来会非常快
- 快速执行和轻量级代码:浏览器会喜欢它;-)
- 可以更改设置
浏览器兼容
IE6、IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果;而 wow.js 也使用了 querySelectorAll 方法,IE 低版本会报错。为了达到更好的兼容,最好加一个浏览器及版本判断。
安装
注:本文只介绍在vuecli中的安装和使用方法哦!
animate.css 安装
- Install via npm
npm install animate.css --save - or yarn
yarn add animate.css
wowjs安装
-
Bower
bower install wowjs -
NPM
npm install wowjs
在vue-cli中具体使用方法
本文demo效果图如下:
想直接跳过看完整代码的可以点击: GitHub上完整demo地址,欢迎下载点赞
//在main.js中引入
import 'animate.css/animate.min.css';
//第一种:在需要引用wowjs的页面
import WOW from './wowjs'; //记得修改为正确地址哦
mounted(){
//new WOW.WOW().init(); 直接引用,默认配置,如果需要修改配置用下面的一段代码
//也可以修改默认配置
let wow = new WOW.WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();
}
//第二种:WOWjs引用方法
import {WOW} from './wowjs/';//记得修改为正确地址哦
mounted(){
//new WOW().init(); 直接引用,默认配置,如果需要修改配置用下面的一段代码
let wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();
}
具体参数配置说明
最后一步如何使用呢
//data-wow-duration 代表的执行动画的时间长短,时间越长代表越慢,反之亦然,
//data-wow-delay 代表延迟多久执行该动画,适用于多个模块不同时间执行动画。
//这里出现的class中第一个wow一定要保证跟上一步设置的boxClass名字一致哦!
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
这一行演示了slideInLeft的动画方式,这里的class类名支持animate的所有动画类型
</section>
<section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10">
这一行演示了slideInRight的动画方式。
</section>
常用的动画类型详见官网:animate.css官网地址
注意:需要注意的是,添加class类的标签只能是块级标签,比如div,header,footer,p,section等,像span之类的行内标签必须增加display:inline-block,转换成块之后才能生效。