javascript - TweenMax.to() 不稳定/不流畅

Question

我正在尝试制作类似幻灯片的基于 Web 的演示，并且正在尝试找出在幻灯片之间转换的最佳方式。
我最初使用的是 jQuery Animate()，但是发现一点都不流畅。我遇到了 GreenSock TweenLite/TweenMax 库并且看到了改进。
不幸的是，事情仍然不是最顺利的。
这是我到目前为止所拥有的:

http://codepen.io/FluidOfInsanity/pen/PbJbWm

它在 Firefox 中运行得很好，但在 Chrome 中却很挣扎。似乎窗口越大，它就越跳动。

我的代码中是否有什么东西导致它无法平滑过渡？还是我遗漏了 TweenMax 实现的某些内容？
非常感谢您的帮助。

更新/回答

最初我的代码如下:

/* BEFORE UPDATE */
TweenMax.to($('.slide-holder'), speed, { 
            left: "-=" + xTo, 
            top: "-=" + yTo,
            overwrite: "all"
          });

TahirAhmed 建议将其从 left 和 top 更改为 x 和 y。现在我的代码看起来像这样并且更流畅:

/* AFTER UPDATE */
TweenMax.to($('.slide-holder'), speed, { 
            x: "-=" + xTo, 
            y: "-=" + yTo,
            overwrite: "all"
          });

Answer 1

做动画的时候，推荐使用x和 y而不是 left和 top .

引用资料:

• 为什么使用 Translate() 移动元素比 Pos:abs 更好/左: Link .
• 高性能动画: Link .
• CSS 触发器: Link .