Vue3使用wow.js动画库

1.下载依赖

npm install wow.js --save

2.导入

import WOW from "wow.js";
onMounted(() => {
  wowjsFn();
});
const wowjsFn = () =>{
  let 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
      },
      scrollContainer: null, // optional scroll container selector, otherwise use window
    });
    wow.init()
}
//注意：wow.js已引入animate.css 因此不用另外安装animate.css只需导入对于的包即可
<style src="wow.js/css/libs/animate.css"></style>

3.使用

    <h1 class="wow bounceInDown"> Lorem ipsum dolor sit.</h1>

wow.js 常用类名

类名	说明
wow bounceInDown	从上往下
wow bounceInLeft	从左往右
wow bounceInRight	从右往左
wow flipIn	旋动