Fullpage.js。添加滚动延迟

Question

我有一个 div "box"，它使用“.fp-viewing”作为锚点逐渐淡化，以在用户滚动到下一页时开始过渡效果。问题是页面在触发 .fp-viewing 时开始滚动，并在动画结束前将框滚动出视图。

如何在触发 .fp-viewing 时延迟开始滚动，直到盒子在 4 秒内完成动画？

.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

#fullpage {
    transition-delay: 1s !important;
}

或者修改函数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）触发它.

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

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

Fullpage.js。添加滚动延迟

Fullpage.js. Adding a scroll delay

javascript

css

jquery

fullpage.js