2024年 vue3 使用wow.js

2023-12-14 19:53:36

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

文章来源:https://blog.csdn.net/hiose89/article/details/135000510
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。