vue3.0+ts+wow.js+animate.css

1.安装wow.js

npm install wow.js --save
# or
yarn add wow.js

2.安装animate.css

npm install animate.css --save
# or
yarn add animate.css

3.在 main.ts/main.js 中配置 animate.css

import 'animate.css'

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

4.在app.vue中声明

<template>

  <router-view/>

</template>

<script lang="ts" setup>

import WOW from "wow.js";

import { onMounted } from 'vue';

    onMounted(() => {

      console.log(123)

      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)

        // callback: function (box:any) {

        // },

        scrollContainer: null, // optional scroll container selector, otherwise use window,

        resetAnimation: true, // reset animation on end (default is true)

      });

      wow.init();

    })

</script>

<style lang="scss">

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

</style>

5.引入wow报错需要在.d.ts中声明

declare module 'wow.js'

6.在页面中使用

      <div  class="wow slideInLeft">

      animate测试

      123

      </div>