Javascript 可见元件之间的开关滞后_Javascript_Jquery_Css_Gsap

Javascript 可见元件之间的开关滞后

javascript jquery css

Javascript 可见元件之间的开关滞后,javascript,jquery,css,gsap,Javascript,Jquery,Css,Gsap,我使用ScrollMagic结合GSAP来实现网站中的动画效果。我的HTML代码如下所示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="scenes-wrapper"> <

我使用ScrollMagic结合GSAP来实现网站中的动画效果。我的HTML代码如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="scenes-wrapper">
        <div class="scenes active" id="scene-1"><!-- 3 to 5 big images inside --></div>
        <div class="scenes" id="scene-2"><!-- 3 to 4 big images inside --></div>
        <div class="scenes" id="scene-3"><!-- 3 to 4 big images inside --></div>
    </div>
</body>
</html>


文件

.scenes

在默认情况下是隐藏的（

显示：无

），使用

.active

类执行。例如，我的滚动条在

#scene-1

上，然后我滚动到

#scene-2

部分，这将导致场景1失去活动类，场景2现在有活动类。问题是，当按下滚动条向下跳时，过渡不是平滑的，但是如果我再次向上滚动并向下滚动，动画就会变得平滑

这是什么原因造成的？我已经尝试将

显示

更改为

可见性

和

不透明度

，但结果是一样的。另外，我使用预加载来预加载图像

可以找到完整的应用程序

我相信你理解你的问题，因为你知道你的代码和所有东西，但是如果你能制作一个JSFIDLE示例，这样我们就可以复制这个问题，并在动态示例上解决问题，那将不胜感激，因为这才是真正的问题所在。谢谢：）谢谢@Kiwad我把完整的应用程序放在这里了