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><liclass="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'; # vue3class="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官网