fullpage.jsでクラスを削除して追加することができない

Question

私はanimate.jsとfullpage.jsを使用しています。私の目標は、セクションから離れてスクロールするときにslideOutLeftアニメーションを追加し、セクションを訪れたときにslideInLeftアニメーションを追加することです。

現在のコードでは、アニメーション内のスライドを削除し、スライドアウトアニメーションを適用しますが、アニメーションにスライドを再適用することはありません。 onLeaveについては

$('#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でslideOutLeftを適用するために残してセクションを使用する必要があります。また、slideOutLeft（afterLoad）を削除して、テキストを再度スライドさせることもできます。ここで

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