Question

我正在尝试制作基于网络的幻灯片，并试图找出幻灯片之间转换的最佳方式。
我最初使用jQuery Animate()，但发现它不是一点都不顺利。我遇到了GreenSock TweenLite / TweenMax库并且看到了改进。
不幸的是，事情仍然不是最顺利的。
这就是我到目前为止所做的：

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

它在Firefox中运行得相当不错，但在Chrome中却相当挣扎。看起来窗户越大，它就会越跳跃。

我的代码中是否有某些东西导致它没有平滑过渡？或者我错过了TweenMax implimentation的东西？你非常感谢你的帮助。

更新/应答

最初我的代码如下：

/* 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（）是跳跃/不平滑

更新/应答

2 个答案: