Question

我正在使用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说明了同样的问题。点击＆＃34;关于＆＃34; （初始化AOS的函数也被称为标题的函数），滚动到底部，你会看到很多空白区域。如果检查控制台，则会在元素上初始化aos（应用其类）但元素永远不会滑动）

Answer 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和AOS - 没有合作

1 个答案: