Fullpage.js。スクロール遅延を追加する

Question

私は次のページにスクロールしたときにトランジションエフェクトを開始するアンカーとして徐々に ".fp-viewing"を使用して徐々に消えるdiv "ボックス"を持っています。ことは、.fp表示がトリガされたときにスクロールを開始し、アニメーションの終了前に表示枠外にスクロールすることです。

4秒でボックスのアニメーションが終了するまで.fp表示がトリガーされると、スクロールの開始を遅らせるにはどうすればよいですか？

.box{ 
    transition: all 4s ease-out; 
    -webkit-transition: all 4s ease-out; 
} 

.fp-viewing-2 .box{ 
    opacity: 0; 
} 

Answer 1

fullpage.jsがcancel a movement before it takes placeに提供するオプションで再生できます。

Reproduction online

var delay = 2000; //milliseconds 
var timeoutId; 
var animationIsFinished = false; 

$('#fullpage').fullpage({ 
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'], 
    onLeave: function(index, nextIndex, direction){ 
     var curTime = new Date().getTime(); 

     //animating my element 
     $('#element').addClass('animate'); 

     clearTimeout(timeoutId); 

     timeoutId = setTimeout(function(){ 
      animationIsFinished = true; 
      $.fn.fullpage.moveTo(nextIndex); 
     }, delay); 

     return animationIsFinished; 
    }, 
});