fullpage.js : direction = up/direction = down에서 2 개의 다른 애니메이션을 사용하십시오.

Question

그래서 fullpage.js와 animate.css를 사용하고 있습니다 만, 아래로 갈 때는 애니메이션을 한 번만 만들 수 있습니다. . 애니메이션을 역방향으로 만들거나 애니메이션을 위아래로 움직이고 싶습니다. 기본적으로 한 번만 입력하는 것이 아니라 섹션에 들어갈 때마다 애니메이션이 사라 지길 바래요!

저는 약간의 도움이 필요합니다.

  //animation section1 AFTERLOAD 
      'afterLoad': function(anchorLink, index){ 
       var $AnimPage1 = $('#section1 .is-animated'); 

       if(index == 1){ 
        $AnimPage1.addClass('animated slideInDown'); 
       } 
      }, 

      //animation section ONLEAVE 
      'onLeave': function(index, nextIndex, direction){ 
       var $AnimPage1 = $('#section1 .is-animated'); 
       var $AnimPage2 = $('#section2 .is-animated'); 
       var $AnimPage3 = $('#section3 .is-animated'); 
       var $AnimPage4 = $('#section4 .is-animated'); 
       var $AnimPage5 = $('#section5 .is-animated'); 

       if (index == 1 && direction == 'down'){ 
        $AnimPage2.addClass('animated slideInUp'); 
       } 
       if (index == 2 && direction == 'down'){ 
        $AnimPage3.addClass('animated slideInUp'); 
       } 
       if (index == 3 && direction == 'down'){ 
        $AnimPage4.addClass('animated slideInUp'); 
       } 
       if (index == 4 && direction == 'down'){ 
        $AnimPage5.addClass('animated slideInUp'); 
       } 

      } 

Answer 1

당신은 일을 여러 번 애니메이션하는 방법에 관한 animate.css 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'); 

을