2024年 vue3 使用wow.js

准备用vue3搞了懒加载动画功能

被反复折磨了好久，国内资料太少，官方又没找到demo

原来是vue3不支持wowjs  vue3换成了wow.js，太容易混淆了！

 

npm 安装wow.js

main.js 引入import 'wow.js/css/libs/animate.css'

核心代码

import WOW from "wow.js";
import { onMounted } 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)
      callback: function () {
        // 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,
      resetAnimation: true, // reset animation on end (default is true)
    });
    wow.init();
})

html代码

<div class="wow slideInLeft">test</div>