animate.css 在 vue 脚手架中结合wow.js的应用方法详细介绍

简介

众所周知，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，转换成块之后才能生效。