fullpagejs和AOS-不能一起使用 [英] fullpagejs and AOS - not working together
问题描述
我正在使用 fullpagejs 和
I'm using fullpagejs and AOS to make some divs popping up from the bottom of the page on scroll (or at least that's what I'd like to achieve).
不幸的是，它无法正常工作.
Unfortunately, it is not working.
是的，我已经阅读了 FAQ 整页，是的，scrollbar设置为true，autoscroll设置为false.
Yes, I've read the FAQ sections of fullpage and yes, scrollbar is set to true and autoscroll is set to false.
我的设置如下:
<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()
}
afterLoad事件函数只是初始化我的菜单链接(基于幻灯片索引)，唯一相关的部分是当我单击一个特定的链接时我初始化AOS(因为我希望库仅在特定的库中工作)页面，而不是无处不在.
the afterLoad event function simply initialises my menu links (based on the slide index) and the only relevant part is that I initialise AOS when I click on one specific link (as I want the library to work only on a specific page and not everywhere.
因此，我加载了页面，单击以浏览我想要的滑块页面，该函数被调用(控制台日志证明它，以及将AOS类应用于相关的div)，我可以看到滚动条，但是什么也没有，div不会从底部弹出.
So, I load the page, click to navigate on the slider page i want, the function is called (console log proofs it, as well as AOS classes are applied to the relevant div), I can see the scrollbar, but nothing, the div is not popping up from the bottom.
你知道我在做什么错吗?谢谢
Any idea what am I doing wrong here? Thanks
这支笔说明了相同的问题.单击关于"(初始化AOS的功能也称为标题功能)，滚动到底部，您将看到很多空白.如果您检查控制台，则aos会在元素上初始化(已应用其类)，但是元素永远不会向上滑动)
This pen illustrates the same problem. Click on "About" (the function that initialises AOS is called as the one for the title works as well), scroll to the bottom and you will see a lot of white space. If you inspect the console, aos is initialised on the element (its classes are applied) but the element never slides up)
推荐答案
仅使用AOS的css部分，并将aos动画关联到fullpage.js回调上.
Use only the css part of AOS and hook up aos-animate on fullpage.js callbacks.
手动添加AOS正文数据
Add the AOS body data manually
<body data-aos-easing="ease" data-aos-duration="1000" data-aos-delay="0">
添加aos-init类
Add the aos-init class
$('[data-aos]').each(function(){ $(this).addClass("aos-init"); });
使用fullpage.js回调切换aos-animate类
Toggle the aos-animate class with fullpage.js callbacks
$('#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")
});
}});
示例HTML
Example HTML
<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>
这篇关于fullpagejs和AOS-不能一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
