vue3中使用animate.css+wow.js

官网链接：

animate

wow.js
版本声明：

  "dependencies": {
    "vue": "^3.3.11",
    "animate.css": "^4.1.1",
    "wow.js": "^1.2.2"
  },

1. 安装：

npm install animate.css --save

npm install wow.js

2. 注册：

- 无效注册方式！！！

// main.js

import animated from "animate.css";
app.use(animated);

- 正确的注册方式！！！

// main.js 

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

3. 使用：

a：animate直接使用

b：wowjs需要在使用的页面引入

// 业务页面
<script>
import WOW from "wow.js";
//  生命周期
onMounted(() => {
    console.log('mounted')
    const 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) {
            // the callback is fired every time an animation is started
            // the argument that is passed in is the DOM node being animated
            console.log('the argument >>')
        },
        scrollContainer: null, // optional scroll container selector, otherwise use window,
        resetAnimation: true, // reset animation on end (default is true)
    });
    wow.init();
})
</script>

<template>
     <div
           class="container-fluid py-5 wow fadeInUp"
           data-wow-delay="0.1s"
      >
        xxxxx
     </div>
</template>