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

3,721 阅读3分钟

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

animate.css

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

官网:daneden.github.io/animate.css… GitHub:github.com/daneden/ani… 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 多种的动画效果,基本能满足各种需求,不能满足的还可以自定义。 官网:www.delac.io/wow/ GitHub:github.com/matthieua/W…

2.安装
npm install wowjs --save-dev
#or
yarn add wowjs --dev

安装wow成功 如上所示即为安装成功,可以看到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 有效的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 是我自定义的动画,也是可以的。

参考文章

yelv.vip/230.html