Nuxtjs上使用wow.js+animate.css实现滚动加载动画

最近做个官网（技术栈使用Nuxt）需要用到滑动到可视区域才触发动画效果，几乎所有的页面都要”动“起来，手写要累死的节奏，赶紧寻找工具！发现wow.js+animate.css可以满足笔者的需求。

animate.css

animate.css 是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设60多种常用的动画，且使用非常简单。

官网：https://daneden.github.io/animate.css/
GitHub：https://github.com/daneden/animate.css

因为在按照wowjs的时候依赖animate.css，会自动安装，所以这里我们先不介绍安装方法。

<h1 class="animate__animated animate__bounce">Example</h1>

只需要在class里加上 animate__animated 和一个特效的名称，就可以使用它。然后它还有一堆高级用法：

• 动画延迟执行的时间：

<h1 class="animate__animated animate__infinite animate__bounce animate__delay-2s">Example</h1>
animate__delay-2s：2秒后再执行动画
animate__delay-3s：3秒后再执行动画
animate__delay-4s：4秒后再执行动画
animate__delay-5s：5秒后再执行动画

• 动画持续时间：

<div class="animate__animated animate__bounce animate__faster">Example</div>
animate__slow：用2s执行完
animate__slower：用3s执行
animate__fast：用800ms执行完
animate__faster：用500ms执行完

• 无限循环动画：

<div class="animate__animated animate__bounce animate__infinite">Example</div>
animate__infinite：无限循环

WOW.js

1.说明

因为在Nuxt中代码要在客户端和服务端（Client and Server）打包两次，客户端有window和document对象，而在服务端中是没有window和document对象的，打包就会报错 ，所以 wowjs 只能在devDependencies中引入。

依赖：animate.css，它支持 animate.css 多达 60 多种的动画效果，基本能满足各种需求，不能满足的还可以自定义。
官网：https://www.delac.io/wow/
GitHub：https://github.com/matthieua/WOW

2.安装

npm install wowjs --save-dev
#or
yarn add wowjs --dev

如上所示即为安装成功，可以看到wow帮我们自动安装了animate.css，我们需要在nuxt.config.js中引入它，

export default {
  ...
  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [..., 'animate.css/animate.css'],
  ...
}

接下来初始化WOW，在你需要使用特效的vue文件中引入：

<script>
  if (process.browser) { // 在这里根据环境引入wow.js
    var {WOW} = require('wowjs')
  }
</script>

生命周期里面 根据环境实例化WOW：

mounted() {
 this.$nextTick(() => {
  if (process.browser) {  // 在页面mounted生命周期里面 根据环境实例化WOW
      new WOW({animateClass: 'animate__animated'}).init()
    }
  });
},

注意：new WOW().init();中的WOW要大写，否则就没效果了。因为wowjs源码中的有效变量是WOW

注意：这里为什么需要自定义 animateClass 呢?

我们看一下wow.js中默认属性配置

WOW.prototype.defaults = {
  boxClass: 'wow',
  animateClass: 'animated',
  offset: 0,
  mobile: true,
  live: true,
  callback: null,
  scrollContainer: null
};

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

默认 animateClass是animated，但是最新版本的animate.css中的class都是以 animate__ 开头，如

.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

所以我们需要把默认值 animateClass: ‘animated’ 改为 animateClass: ‘animate__animated’，这样动画才会生效。

3.使用

只需要在class里加入wow，然后再加入一个 animate.css 里面的动画，就可以实现快乐的滚动了。如：

<h3 class="pro-alias text-right wow animate__rotateInUpRight">why</h3>

当然还有其他很多配置，如：

<div class="wow animate__bounce " data-wow-delay="1.5s"  data-wow-iteration="1"></div>

• data-wow-duration：更改动画持续时间
• data-wow-delay：动画开始前的延迟
• data-wow-offset：开始动画的距离（与浏览器底部相关）
• data-wow-iteration：动画的次数重复（无限次：infinite）

4.使用自定义动画

<p class="si-desc wow customSlideUpIn" v-for="(item, index) in (selectDetail.description)" :key="index">item</p>

customSlideUpIn 是我自定义的动画，也是可以的。

参考文章

https://yelv.vip/230.html