Javascript Fullpage.js。添加滚动延迟

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

当.fp查看被触发时，我如何延迟滚动的开始，直到框在4s内完成动画

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

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

---

您可以使用fullpage.js提供给的选项

---

您可以使用fullpage.js提供给的选项

#整页{
转换延迟：1s！重要；
}

#整页{
转换延迟：1s！重要；
}

对于我来说，这个变体：

$(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; 

---

对于我来说，这个变体：

$(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; 

---

这既便宜又简单，但我只需将所需的整页函数包装在自定义函数包装器中，然后在准备就绪时使用

settimeout

（ala）启动它

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

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

---

这既便宜又简单，但我只需将所需的整页函数包装在自定义函数包装器中，然后在准备就绪时使用

settimeout

（ala）启动它

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

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

---

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

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