本文主要是介绍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官网
这篇关于Vue - 详细介绍wow.js滚动触发动画组件（Vue2 Vue3）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
