我有一个 div“框”，当用户滚动到下一页时，它使用“.fp-viewing”作为锚点来逐渐淡出过渡效果。问题是当 .fp-viewing 被触发时页面开始滚动，并在动画完成之前将框滚动到视野之外。
当触发 .fp-viewing 时，如何延迟滚动的开始，直到 box 在 4s 内完成动画？
.box{
transition: all 4s ease-out;
-webkit-transition: all 4s ease-out;
}
.fp-viewing-2 .box{
opacity: 0;
}
您可以使用 fullpage.js 提供的选项在移动发生之前取消它。
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 {
transition-delay: 1s !important;
}或修改 fullpage.js 中的 addAnimation 函数
对我来说，这个变体：
$(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（a la this answer）来触发它。
function slideWithDelay() {
fullpage_api.moveSlideRight();
}
// Change slide on select
$('select').on('change',function(){
setTimeout(slideWithDelay, 500);
})