我正在尝试制作类似幻灯片的基于 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"
});
最佳答案
做动画的时候,推荐使用x
和 y
而不是 left
和 top
.
引用资料:
关于javascript - TweenMax.to() 不稳定/不流畅,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41006933/