fullpage js和IOS - 不能一起工作

By simon at 2018-02-07 • 0人收藏 • 73人看过

我正在使用[fullpagejs](https://github.com/alvarotrigo/fullPage.js/)和 [AOS](https://github.com/michalsnik/aos)做一些divs从中弹出 滚动页面的底部(或至少这是我想实现的)。 不幸的是,这是行不通的ING。 是的,我读过[FAQ](https://github.com/alvarotrigo/fullPage.js/wiki/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不弹出 来自底部。 任何想法我在这里做错了什么?谢谢 [这支笔](https://codepen.io/nickimola/pen/WMeeJK)说明一样 亲blem。点击“关于”(初始化AOS的函数被称为 一个为标题工作以及),滚动到botto米,你会看到很多 的空间。如果您检查控制台,aos将在元素上初始化 (它的类被应用)但元素永远不会滑落)

1 个回复 | 最后更新于 2018-02-07
2018-02-07   #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>

登录后方可回帖

Loading...