Question

我有一个div＆＃34;框＆＃34;逐渐消失，使用＆＃34; .fp-viewing＆＃34;作为锚点，当用户滚动到下一页时启动过渡效果。当触发.fp-viewing时，页面开始滚动，并在动画结束前将框滚动到视图之外。

当触发.fp-viewing直到box在4s内完成动画时，如何延迟滚动的开始？

.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;

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

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

        clearTimeout(timeoutId);

        timeoutId = setTimeout(function(){
            animationIsFinished = true;

            fullpage_api.moveTo(destination.index + 1);
        }, delay);

        return animationIsFinished;
    },
});

Answer 2

document

或修改功能addAnimation 在fullpage.js

中

Answer 3

为我工作这个变体：

$(elem).fullpage({ 
/// opttions, 
onLeave: function(origin, destination, direction){ 
if(animationIsFinished === false){ 
// do some code 
} 
clearTimeout(timeoutId); 
timeoutId = setTimeout(function(){ 
animationIsFinished = true;
 $.fn.fullpage.moveTo(destination); 
   setTimeout(() => { 
     animationIsFinished = false; 
   }, 200); 
}, 600); 
return animationIsFinished;

Answer 4

这既便宜又简单，但我只是将我需要的整页函数包装在自定义函数包装器中，然后在我准备好时使用 settimeout（a la this answer）来触发它。< /p>

function slideWithDelay() {
    fullpage_api.moveSlideRight();
}

// Change slide on select
$('select').on('change',function(){
    setTimeout(slideWithDelay, 500);
})

Fullpage.js。添加滚动延迟

4 个答案: