fullpage js 和 AOS - 不一起工作答案

【问题标题】：fullpagejs and AOS - not working togetherfullpage js 和 AOS - 不一起工作
【发布时间】：2018-07-06 14:01:29
【问题描述】：

我正在使用fullpagejs 和AOS 让一些 div 在滚动时从页面底部弹出（或者至少这是我想要实现的）。

很遗憾，它不起作用。

是的，我已阅读整页的 FAQ 部分，是的，scrollbar 设置为 true，autoscroll 设置为 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（因为我希望库仅在特定的页面而不是任何地方。

所以，我加载页面，在我想要的滑块页面上点击导航，调用该函数（控制台日志证明它，以及将AOS类应用于相关的div），我可以看到滚动条，但是没什么，div 不是从底部弹出来的。

知道我在这里做错了什么吗？

曾经有this pen 说明了同样的问题。点击“关于”（初始化AOS的函数也被称为标题的函数），滚动到底部，你会看到很多空白。如果您检查控制台，则会在元素上初始化 AOS（应用其类），但元素永远不会向上滑动）

【问题讨论】：

您是否尝试过在 fullPage.js 的 afterRender 回调上初始化 AOS，详见常见问题解答？
是的，但仍然没有。另外奇怪的部分是 thr onscroll 事件不会触发（即使在没有 aos 的情况下尝试）
你忘了说你正在使用scrollOverflow: true。当然，这不会触发滚动事件。因为这是使用库 iScroll.js，详见 fullPage.js 文档。恐怕你不会那么简单。您可以查看this answer，但它可能对您没有帮助。

标签： javascript jquery fullpage.js animate-on-scroll

【解决方案1】：

仅使用 AOS 的 css 部分并在 fullpage.js 回调上连接 aos-animate。

手动添加 AOS 正文数据

<body data-aos-easing="ease" data-aos-duration="1000" data-aos-delay="0">

添加 aos-init 类

$('[data-aos]').each(function(){ $(this).addClass("aos-init"); });

使用 fullpage.js 回调切换 aos-animate 类

$('#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

<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 回调，因为我需要创建某种“延迟加载效果”（在页面滚动（不是 autoScroll，一些 div 需要向上滑动），我认为整页上没有回调