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 --save

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 setup>
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"
    >
    ...
    </div>
</template>