实现页面滚动指定位置显示动画效果（vue3+ts+wow.js）

本文链接：https://blog.csdn.net/Annaseet/article/details/140183876

在用ts来写的时候踩了很多坑，记录下使用中的错误。

首先实现这个功能，第一步就是需要和一个叫animate.css的动画库联合使用。

这里先导入第三方库

这里就直接讲wowjs的导入等方法，animate不会的可以看我之前的一篇文章

npm install wowjs --save

然后我们就是引入，这里很容易出错，特别是用ts写项目的

import WOW from "wow.js";
// 这里需要注意的是，WOW必须是大写

如果引入报错了，我们首先先src的目录下建一个types文件夹再在它下面建一个index.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();

过后我们就可以在我们的标签使用