vue3+ts+wow.js实现页面滚动到屏幕可视区域再显示过渡动画

本文链接：https://blog.csdn.net/Fantasywt/article/details/130382615

本文介绍了如何在基于TypeScript的Vue项目中安装和使用wow.js及animate.css来实现动画效果。首先通过npm安装两个库，然后在项目中导入并创建WOW实例。在模板中应用动画类，如zoomIn，配合onMounted生命周期钩子在组件挂载后初始化动画。

摘要由CSDN通过智能技术生成

效果图

20230426112913

安装 wow.js

npm install wow.js --save

安装 animate.css

npm install animate.css --save

main.ts

import 'animate.css';
import 'animate.css/animate.compat.css';

注：我的项目是ts，他无法识别js，所以要在src目录里面，与main.ts同级新建一个xxx.d.ts文件

例如
在这里插入图片描述
在里面写上这个

declare module 'wow.js';

单页面引用示例

千万记住引用的wow.js一定要命名为WOW大写！！！！的，别问为什么，我也不知道
代码中 zoomIn 是animate.css的，animate的写法是前缀要加animated，在这里面就不用了，下面配置已经配置好了，会自动添加

<template>
    <div class="home">
      <div class="wow zoomIn">
        <h1 class="banner-title">娱乐</h1>
      </div>
    </div>
  </template>
  <script lang="ts" setup>
  import WOW from "wow.js";
  import { onMounted, reactive } from "vue";
  
  onMounted(() => {
    var wow = new WOW({
      boxClass: "wow", // animated element css class (default is wow)
      animateClass: "animated", // animation css class (default is animated)
      offset: 0, // distance to the element when triggering the animation (default is 0)
      mobile: true, // trigger animations on mobile devices (default is true)
      live: true, // act on asynchronously loaded content (default is true)
      scrollContainer: null, // optional scroll container selector, otherwise use window,
      resetAnimation: true, // reset animation on end (default is true)
    });
    wow.init();
  });
  </script>
  <style lang="scss" scoped>
  </style>