使用 fullpage.js 删除和添加 class 时遇到问题

Question

我正在使用 animate.js 和 fullpage.js。我的目标是在滚动离开某个部分时添加一个 slideOutLeft 动画，并在访问一个部分时添加一个 slideInLeft 动画。

我当前的代码删除了动画中的幻灯片并应用了滑出动画，但从未重新应用动画中的幻灯片。

$('#fullpage').fullpage({
   afterLoad: function(anchorLink, index) {
    $('.text').addClass('animated slideInLeft');
  },
  onLeave: function(index, nextIndex, direction) {
    
    $('.text').removeClass('animated slideInLeft');  
 
    $('.text').addClass('animated slideOutLeft');  
    }
 
});

#first {
  background-color: yellow;
}
#second {
  background-color: blue;
}
.height {
height: 100vh;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/jquery.fullPage.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/jquery.fullPage.css" rel="stylesheet" />

<div id="fullpage">

  <div class="section height" id="first">
      <h2 class="text">Something1</h2>
  </div>

  <div class="section height" id="second">
     <h2 class="text">Something2.</h2>
    
  </div>
  <div class="section height" id="third">
    <h2 class="text">Something else </h2>
  </div>

</div>

Answer 1

对于onLeave，您必须使用离开部分查找文本并在onLeave中应用slideOutLeft。还要记得把afterLoad中的slideOutLeft去掉，文字可以再滑出来。

$('#fullpage').fullpage({
  afterLoad: function(anchorLink, index) {
    $(this).find('.text').removeClass('animated slideOutLeft');
    $(this).find(".text").css("display","block");
    $(this).find('.text').addClass('animated slideInLeft');
  },
  onLeave: function(index, nextIndex, direction) {
    var leavingSection = $(this);
    $(leavingSection).find(".text").removeClass('animated slideInLeft');  

    $(leavingSection).find(".text").addClass('animated slideOutLeft');  
    }

});

示例如下： https://jsfiddle.net/39gadbnv/1/

使用 fullpage.js 删除和添加 class 时遇到问题

Having trouble removing and adding a class with fullpage.js

javascript

jquery

fullpage.js