Fullpage.js。 添加滚动延迟

我有一个div“box”，当用户滚动到下一页时，使用“.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; } 

Answer 1

您可以使用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; }, });