1

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

不幸的是，它不起作用。

是的，我已阅读fullpage的常见问题解答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在单击一个特定链接时进行初始化（因为我希望该库仅在特定页面上工作，而不是在任何地方工作。

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

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

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

4

1 回答 1

11

仅使用 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>

于 2018-02-06T14:25:29.327 回答