Fullpage.jsトランジションをダイナミックにする方法

Question

私のコードは次のように動作します： あるセクションから別の独立したスクロールスクロールアップまたはスクロールまでスクロールするときは、現在のセクションに.compass-areas-centeredと.bg-areasのクラスを含めます。

HTML

以下、このコードJS

<?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(); ?> 

動的セクションを生成

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 時々私は http://giphy.com/gifs/l3V0Bhrg1PJ33HMBi

働くバック効果に必要

Answer 1

animate.cssライブラリを使用しているようです。

ただアニメーションが終了したら、クラスを削除するin the docs推奨されるアプローチをお読みください。

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

は、次に使用：

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