滚动加载动画
实现效果：滚到到指定元素后，该元素才执行对应动画
依赖配置
实现该效果，需要借助两个库：wow.js以及animate.css
并且由于wow 依赖于 animate 动画库，所以
安装 animate.css 以及 wow.js
npm install animate.css --save
npm install wow.js --save
配置动画
首先写一个简单的页面
提供两个元素，第一个为占据全屏（是为了提供滚动空间）的 div，第二个为模拟需要执行动画的卡片
<template>
<div class="container">
<!-- 占据全屏 -->
<div class="before">index</div>
<!-- 欲执行动画的div -->
<div class="after">after</div>
</div>
</template>
<script setup></script>
<style scoped lang="less">
.container {
width: 100%;
.before {
width: 100%;
height: 100vh;
background-color: antiquewhite;
}
.after {
width: 40%;
height: 40vh;
background-color: aquamarine;
}
}
</style>
修改第二个元素，填入你想要执行的动画 class，类名可以直接在 animate.css 官网找到
除此之外，还有一个 scroll-item 类，这是为了让 wowjs 获取该 DOM 的标记
注意！这里先不要为元素添加
animate__animated类名，这个在后面留给 wowjs 动态添加！！！
<template>
<div class="container">
<div class="before">index</div>
<div class="after scroll-item animate__fadeInRight">after</div>
</div>
</template>
初始化 wowjs 代码，由于使用 vue3，对于 DOM 操作必须放在 onmounted 钩子执行
wowjs 的实现原理是：在滚动到指定元素位置时，动态的添加一个 class，使其具有动画切换效果，比如下方我们动态添加了类名 animate__animated ，这就使得 animate.css 得以启动并执行动画
<script setup>
import "animate.css";
import Wow from "wow.js";
import {
onMounted } from "vue";
onMounted(() => {
const wow = new Wow({
// 对所有拥有该class的元素挂载动画
boxClass: "scroll-item",
// 需要挂载的动画元素
animateClass: "animate__animated",
// 偏移值（即偏移一定距离后再执行动画，推荐设置！）
offset: 100,
// 移动设备是否生效
mobile: true,
// 是否支持异步
live: true,
});
wow.init();
});
</script>