Probleme beim Entfernen und Hinzufügen einer Klasse mit Fullpage.js

Question

Ich benutze animate.js und fullpage.js. Mein Ziel ist es, eine slideOutLeft-Animation hinzuzufügen, wenn man von einem Abschnitt weg scrollt, und beim Besuch eines Abschnitts eine slideInLeft-Animation hinzuzufügen.

Mein aktueller Code entfernt die Folie in der Animation und wendet die Folie-Folie-Animation an, aber wiederholt nie die Folie in Animation.

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

Für die onLeave, müssen Sie den Abschnitt zu verlassen, um den Text und wenden Sie die slideOutLeft in onLeave zu finden. Denken Sie auch daran, dass Sie die slideOutLeft in afterLoad entfernen, die der Text es wieder herausschieben kann. Hier

$('#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'); 
    } 

}); 

ist das Beispiel: https://jsfiddle.net/39gadbnv/1/