解决aos.js和fullpage.js兼容问题

Question

$('.aos-init').removeClass('aos-animate'); //清除aos-animate元素
$('#fullpage').fullpage({
afterLoad: function(anchorLink, index){
$(".section .aos-init").removeClass("aos-animate");//清除aos-animate元素
if( $(".section").hasClass("active")){ //判断active元素
$(".active .aos-init").addClass('aos-animate'); //添加aos-animate
}
}
});

Answer 1

在AOS.js中使用delay.js，在fullpage.js中使用scrolloverflow.js：
AOS.init({ delay: 500, // 延迟500ms });
$('#fullpage').fullpage({ scrollOverflow: true, });

修改AOS.js和fullpage.js中关于滚动的回调函数：
AOS.init({ onRefresh: () => { setTimeout(() => { $.fn.fullpage.reBuild() }, 500); } });
$('#fullpage').fullpage({ afterRender: () => { AOS.refresh(); }, onLeave: () => { AOS.refresh(); } });