Vue - 详细介绍wow.js滚动触发动画组件（Vue2 & Vue3）

Vue - 详细介绍wow.js滚动触发动画组件（Vue2 & Vue3）

在日常网页中，我们难免会用到CSS动画来对某些元素进行显示隐藏，在wowjs中可根据浏览器滚动来触发对应的CSS动画，并且可设置多种animate动画类型、动画持续时间和延迟时间，下面我们一起来看下如何使用：

1. 安装

npm install animate.css

#Vue2
npm install wowjs

#Vue3
npm install wow.js

2. 引入并使用

在main.js中：

# 使用animate.css最新的4.x版本
import 'animate.css'

# 使用wowjs自带的animate.css的3.x版本
import 'wowjs/css/libs/animate.css'; # vue2
import 'wow.js/css/libs/animate.css'; # vue3

在需要引用的组件上：

<template>
  <ul>
    <li
      class="wow animate__animated animate__slideInUp"
      data-wow-duration="1s"
      data-wow-delay="2s"
      data-wow-iteration="10"
      data-wow-offset="10"
    ></li>
  </ul>
</template>

# Vue2
<script>
import  WOW  from "wowjs";
export default {
  mounted() {
    var wow = new WOW({
      boxClass: "wow", // 动画元素css类（默认为wow）
      animateClass: "animated", // 动画css类（默认为animated）
      offset: 0, // 触发动画时到元素的距离（默认值为0）
      mobile: true, // 在移动设备上触发动画（默认为true）
      live: true, // 对异步加载的内容进行操作（默认值为true）
      callback: function (box) {
        console.log(box);
        // 每次启动动画时都会触发回调,传入的参数是正在设置动画的DOM节点
      },
      scrollContainer: null, // 可选滚动容器选择器，否则使用window，
      resetAnimation: true, // 结束时重置动画（默认为true）
    });
    wow.init();
  }
};
</script>

# Vue3
<script setup>
import  WOW  from "wow.js";
import { onMounted } from "vue";
onMounted(()=>{
    var wow = new WOW({
      boxClass: "wow", // 动画元素css类（默认为wow）
      animateClass: "animated", // 动画css类（默认为animated）
      offset: 0, // 触发动画时到元素的距离（默认值为0）
      mobile: true, // 在移动设备上触发动画（默认为true）
      live: true, // 对异步加载的内容进行操作（默认值为true）
      callback: function (box) {
        console.log(box);
        // 每次启动动画时都会触发回调,传入的参数是正在设置动画的DOM节点
      },
      scrollContainer: null, // 可选滚动容器选择器，否则使用window，
      resetAnimation: true, // 结束时重置动画（默认为true）
    });
    wow.init();
})
</script>

<style>
li {
  width: 200px;
  height: 200px;
  background: skyblue;
  margin: 20px;
}
</style>

wow.js 的四个属性：

属性	描述
data-wow-duration	动画持续时间
data-wow-delay	动画延迟时间
data-wow-offset	元素的位置露出后距离底部多少像素执行
data-wow-iteration	动画执行次数，无限次：infinite

3. 注意事项：

对于animate.css的3.x旧版本，引用的class名称不同，且安装wowjs后，使用自带的animate.css，动画则一切正常：

import 'wowjs/css/libs/animate.css'; # vue2
import 'wow.js/css/libs/animate.css'; # vue3

class="wow slideInUp"

对于安装animate.css的4.x新版本，不使用wowjs自带的animate.css，有可能有Bug，元素提前显示：

import 'animate.css'

class="wow animate__animated animate__slideInUp"

那么到此就介绍了wowjs滚动触发动画组件的详细内容了，有兴趣的小伙伴们可以去到下面链接中去查看，如果对你项目有带来帮助的话，麻烦点点赞哦~

参考链接：
wow.js：wow.js
wow.js - github：wow.js - github
animate.css：animate.css官网