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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!