准备用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>