全页.js。添加滚动延迟答案

【问题标题】：Fullpage.js. Adding a scroll delay全页.js。添加滚动延迟
【发布时间】：2016-07-10 15:44:21
【问题描述】：

我有一个 div“框”，它使用“.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;
}

【问题讨论】：

标签： javascript jquery css fullpage.js

【解决方案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;
    },
});

【讨论】：

我会试试你的建议，看看效果如何。非常感谢。
感谢您的代码工作，但这不是我想要的。我想这是我的错，因为没有清楚地解释我需要什么。我观看了您的视频“使用 fullpage.js 在部分之间创建 css3 动画”，这就是我开发粘贴在第一条评论中的 css 动画代码的方式。
当“.fp-viewing”改变时触发我的css动画，当用户用鼠标滚动到新部分时触发.fp-viewing。您粘贴的代码延迟了 .fp-viewing 的触发。那不是我需要的。我需要先触发 .fp-viewing，然后在滚动到下一部分开始之前延迟 5 秒，因为我的 css 动画是由 .fp-viewing 触发的，它需要在滚动到下一部分之前完成其动画。
我不确定我这样做是否正确。除了 .fp-viewing 之外，我的动画可能需要不同的触发器。任何建议将不胜感激。谢谢。
你的做法不对。您应该在超时函数之外的onLeave callback 中触发动画。只需在您的元素中添加一个类即可触发它。您认为什么是最适合您的目的，而 fp-viewing 类不在这种情况下。

【解决方案2】：

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

或修改函数addAnimation 在 fullpage.js 中

【讨论】：

如此简单，对我有用！谢谢。

【解决方案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;

【讨论】：

【解决方案4】：

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

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

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

【讨论】：