1200字范文 > Nuxtjs上使用wow.js+animate.css实现滚动加载动画

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

时间：2020-02-18 04:29:35

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

animate.css

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

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

GitHub：/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：/matthieua/WOW

2.安装

npm install wowjs --save-dev#oryarn add wowjs --dev

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

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

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

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

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

mounted() {this.$nextTick(() => {if (process.browser) {// 在页面mounted生命周期里面根据环境实例化WOWnew 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};

默认 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’，这样动画才会生效。