Fullpage.js wie man Übergänge dynamisiert

Question

Ich brauche meinen Code funktioniert wie folgt: Wenn ich von einem Abschnitt zu einem anderen unabhängigen Bildlauf nach oben oder unten scrollen, enthalten die .compass-areas-centered und .bg-areas Klassen im aktuellen Abschnitt.

HTML

dieser Code unten Abschnitte erzeugen dynamische

<?php foreach ($items as $k => $post) : setup_postdata($post); ?> 

<div class="section"> 

    <div class="large-12 columns compass-areas"> 

     <img src="<?php echo $secaoImgUrl[0]; ?>" class="bg-areas" /> 

     <div class="compass-areas-centered"> 
      <!-- .compass-areas-centered --> 
     </div> 

    </div> 

</div><!-- .section --> 

<?php endforeach; wp_reset_postdata(); ?> 

JS

onLeave: function(index, nextIndex, direction){ 

     var leavingSection = $(this); 

     // AFTER LEAVE HOME APPLY FX IN COMPASS 
     if(index == 1 && nextIndex == 2){ 
      $('.compass-areas-centered').toggleClass('animated fadeInDown'); 
      $('.bg-areas').toggleClass('animated fadeInUp'); 
     } 

     if(index == 2 && nextIndex == 3){ 
      $('.compass-areas-centered').toggleClass('animated fadeInDown'); 
      $('.bg-areas').toggleClass('animated fadeInUp'); 
     } 

     if(index == 3 && nextIndex == 4){ 
      $('.compass-areas-centered').toggleClass('animated fadeInDown'); 
      $('.bg-areas').toggleClass('animated fadeInUp'); 
     } 

     if(index == 4 && nextIndex == 5){ 
      $('.compass-areas-centered').toggleClass('animated fadeInDown'); 
      $('.bg-areas').toggleClass('animated fadeInUp'); 
     } 

    } 

JS FIDDLE https://jsfiddle.net/y3barsq6/ GIF manchmal ich brauche wieder Effekte funktionieren http://giphy.com/gifs/l3V0Bhrg1PJ33HMBi

Answer 1

Es scheint, dass Sie die Bibliothek animate.css verwenden.

Lesen Sie einfach in the docs die empfohlene Ansatz, um die Klassen zu entfernen, sobald die Animation beendet ist:

$.fn.extend({ 
    animateCss: function (animationName) { 
     var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; 
     $(this).addClass('animated ' + animationName).one(animationEnd, function() { 
      $(this).removeClass('animated ' + animationName); 
     }); 
    } 
}); 

Dann nutzen:

$('#yourElement').animateCss('bounce');