TweenMax.to() jumpy/not 平滑

Question

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

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

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

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

Update/Answer

最初我的代码如下：

/* 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 Top/left：Link.
高性能动画：Link.
CSS 触发器：Link.

Answer 2

Tahir 的回答几乎涵盖了它，但也尝试将这些代码添加到您的补间中：

ease: Power2.easeInOut,
force3D: false,

正如我在几乎所有关于 tweenmax 的文章中看到的那样，使用 .fromTo()

是更好的做法

同样重要的是，不要为要设置动画的元素设置 css 过渡，您只需向这些元素添加 .set({transition: " ... "})在你的补间结束时

TweenMax.to() jumpy/not 平滑

TweenMax.to() is jumpy/not smooth

javascript

css

jquery

gsap

Update/Answer