页面往往会要求添加各种各样的动效，使页面更加生动，吸引眼球，但是会在页面加载时，全部走完，如何使动画再页面滑动到该区域的时候，再执行动画呢，如果手写得累死，这里找到一个ui动画库，就是wow.js
wowjs需要和一个叫animate.css的动画库联合使用，animatecss这个库提供了多张动效，基本满足日常页面开发，使用简单，还可以自定义动画效果，还是非常不错的。
animate.css在vue3中安装使用如下：
npm install animate.css --save
// or
yarn add animate.css
// 下载完之后，在main.ts中 引入
import "animate.css";
// 引入完直接在想要用到动效的标签上添加一个animate__animated 或者animated的class类名，和你要使用的动效的类名
<p class="animated animate__flipInX"> animate.css </p>
这样动效就可以实现了。
但是为了可以在页面滚动到该区域的时候，再让动画效果出现，还要加入wow.js辅助一下
wowjs在vue3中安装使用如下:
npm install wowjs --save
// 下载完之后全局引入， 也就是在main.ts中引入
import WOW from "wow.js";
// 这里需要注意的是，WOW必须是大写
// 如果你是ts版本，引入的wow.js可能会报错，你需要在全局的.d.ts文件里declare module "wow.js"定义一下
// 然后是配置
new WOW({
boxClass: 'wow', // 类名，在用户滚动时显示隐藏的框。
animateClass: 'animated', // 触发CSS动画的类名称（animate.css库默认为“ animated”）
offset: 0, // 定义浏览器视口底部与隐藏框顶部之间的距离。当用户滚动并到达此距离时，隐藏的框会显示出来。
mobile: true, // 在移动设备上打开/关闭WOW.js。
live: true // 在页面上同时检查新的WOW元素。
}).init();
这样你可以在用到他的地方加一个“wow”类名就可以了
// 甚至你可以把animate.css的那个标注类名代替了，如下
// 当页面滑动到这的时候，动画再执行
<p class="wow animate__flipInX"> animate.css </p>
wow还有一些高级配置项，可以自由使用和配置
- data-wow-duration：更改动画的持续时间
- data-wow-delay：动画开始之前的延迟
- data-wow-offset：启动动画的距离（与浏览器底部有关）
- data-wow-iteration：动画的次数重复
<p class="wow animate__flipInX"
data-wow-duration="1s"
data-wow-delay="2s"
data-wow-offset="100"
data-wow-iteration="5"
> animate.css </p>
之后，我在做到这步的时候还碰到一个问题，就是设置offset的时候，死活不生效，找了好多原因，在wow和animate的git，issues里也没找到，后来突然想到，是不是没有监测到scroll事件，找了一下，在我项目的reset.css的文件里，app上加了一个overflow: hidden，去掉之后，就好用了。
