Javascript fullpagejs和AOS-不在一起工作
我正在使用和在滚动页面的底部弹出一些div（或者至少这是我想要实现的） 不幸的是，它不起作用 是的，我已经阅读了全文的部分，是的，Javascript fullpagejs和AOS-不在一起工作,javascript,jquery,fullpage.js,animate-on-scroll,Javascript,Jquery,Fullpage.js,Animate On Scroll,我正在使用和在滚动页面的底部弹出一些div（或者至少这是我想要实现的） 不幸的是，它不起作用 是的，我已经阅读了全文的部分，是的，滚动条设置为true，autoscroll设置为false 我的设置如下所示： <div class="section" id="test"> <div class="slide"> <div class="section">
滚动条trueautoscrollfalse<div class="section" id="test">
<div class="slide">
<div class="section">
{someOtherContent}
<!-- div i want to animate is down below -->
<div data-aos="slide-up">test</div>
</div>
</div>
<div class="slide"></div>
<div class="slide"></div>
</div>
$('#test').fullpage({
lazyLoading: false,
lockAnchors: true,
scrollingSpeed: 300,
fitToSection: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopHorizontal: false,
offsetSections: false,
resetSliders: false,
scrollOverflow: true,
scrollOverflowReset: true,
touchSensitivity: 0,
bigSectionsDestination: top,
keyboardScrolling: false,
animateAnchor: false,
recordHistory: true,
controlArrows: false,
verticalCentered: true,
responsiveWidth: 0,
responsiveHeight: 0,
sectionSelector: '.section',
slideSelector: '.slide',
scrollBar:true
//events
afterLoad: function (anchor, index( {
initArrowEventListener()
}
{someOtherContent}
测试
$（“#测试”）。整页({
懒散：错，
是的，
滚动速度：300，
fitToSection:false，
宽松：“easeInOutCubic”，
easingcs3:“轻松”，
错:错,，
抵消部分：假，
重置滑块：false，
对,，
scrollOverflowReset:true，
触摸灵敏度：0，
大区目标：顶部，
键盘滚动：错误，
animateAnchor:错，
历史记录：没错，
控制箭头：错误，
垂直中心：对，
响应宽度：0，
响应高度：0，
节选择器：'.section'，
幻灯片选择器：'.slide'，
滚动条：对
//事件
后载：功能（锚定、索引（{
initArrowEventListener（）
}
AOS过去也有类似的问题。单击“About”（初始化AOS的函数也被称为标题的函数），滚动到底部，你会看到很多空白。如果你检查控制台，AOS在元素上被初始化（应用了它的类），但元素从不向上滑动）仅使用AOS的css部分，并在fullpage.js回调上连接AOS动画 手动添加AOS主体数据
<body data-aos-easing="ease" data-aos-duration="1000" data-aos-delay="0">
$('#fullpage').fullpage({
slidesNavigation: true,
controlArrows: false,
onLeave: function(){
$('.section [data-aos]').each(function(){
$(this).removeClass("aos-animate")
});
},
onSlideLeave: function(){
$('.slide [data-aos]').each(function(){
$(this).removeClass("aos-animate")
});
},
afterSlideLoad: function(){
$('.slide.active [data-aos]').each(function(){
$(this).addClass("aos-animate")
});
},
afterLoad: function(){
$('.section.active [data-aos]').each(function(){
$(this).addClass("aos-animate")
});
}});
<div id="fullpage">
<div class="section" id="section0">
<div class="intro">
<div data-aos="fade-up">
<h1>fade me up!</h1>
</div>
</div>
</div>
<div class="section" id="section1">
<div class="slide">
<div class="intro">
<div data-aos="zoom-in">
<h1>zoom me in!</h1>
</div>
</div>
</div>
<div class="slide">
<div class="intro">
<div data-aos="flip-down">
<h1>flip me down!</h1>
</div>
</div>
</div>
</div>
让我消失！
放大我！
把我打倒！
仅使用AOS的css部分，并在fullpage.js回调上连接AOS动画 手动添加AOS主体数据
<body data-aos-easing="ease" data-aos-duration="1000" data-aos-delay="0">
$('#fullpage').fullpage({
slidesNavigation: true,
controlArrows: false,
onLeave: function(){
$('.section [data-aos]').each(function(){
$(this).removeClass("aos-animate")
});
},
onSlideLeave: function(){
$('.slide [data-aos]').each(function(){
$(this).removeClass("aos-animate")
});
},
afterSlideLoad: function(){
$('.slide.active [data-aos]').each(function(){
$(this).addClass("aos-animate")
});
},
afterLoad: function(){
$('.section.active [data-aos]').each(function(){
$(this).addClass("aos-animate")
});
}});
<div id="fullpage">
<div class="section" id="section0">
<div class="intro">
<div data-aos="fade-up">
<h1>fade me up!</h1>
</div>
</div>
</div>
<div class="section" id="section1">
<div class="slide">
<div class="intro">
<div data-aos="zoom-in">
<h1>zoom me in!</h1>
</div>
</div>
</div>
<div class="slide">
<div class="intro">
<div data-aos="flip-down">
<h1>flip me down!</h1>
</div>
</div>
</div>
</div>
让我消失！
放大我！
把我打倒！
您是否尝试过在fullPage.js的afterRender回调中初始化AOS，如常见问题解答中所述？是的，但仍然没有。奇怪的是，onscroll事件也不会触发（即使在没有AOS的情况下尝试）你忘了提到你正在使用
scrollOverflow:truescrollOverflow:true