TweenMax.to() 跳跃/不平滑答案

【问题标题】：TweenMax.to() is jumpy/not smoothTweenMax.to() 跳跃/不平滑
【发布时间】：2016-12-06 23:39:56
【问题描述】：

我正在尝试制作一个基于 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"
          });

【问题讨论】：

不确定 codepen 的结果有什么问题？
幻灯片之间的过渡不是最流畅的。好像有点跳我在 Chrome 和 Firefox 中查看它。两者的结果相似。
幻灯片之间的过渡显得“平滑”，这里是铬。
如果全屏制作怎么办？我的手机也有同样不太流畅的效果。
你指的是图片的边缘吗？

标签： javascript jquery css gsap

【解决方案1】：

动画时，建议使用x和y，而不是left和top。

参考资料：

为什么使用 Translate() 移动元素优于 Pos:abs 上/左：Link。
高性能动画：Link。
CSS 触发器：Link。

【讨论】：

【解决方案2】：

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

ease: Power2.easeInOut,
force3D: false,

正如我在几乎每篇关于 tweenmax 的文章中看到的那样，使用 .fromTo() 是一种更好的做法

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

【讨论】：