CSS3表现如何? 动画左或translateX

在我正在制作的HTML5 / CSS3演示中,我主要使用CSS过渡来加速性能。

我想知道我的UI – 例如,当前JQuery根据鼠标位置操作容器Div的LEFT属性,例如,我应该改为使用transform: translateX(tx)吗? 或者,如果浏览器支持JQuery,它会自动执行此操作吗?

jquery不使用transform:translateX(tx)。 你必须手工制作。 但这是一个很好的做法,因为它实际上要快得多。

http://jsfiddle.net/MZBtr/2/

您可以使用Mondernizr进行特征检测,然后根据结果决定要做什么。

这是一个演示它的演示: http : //jsfiddle.net/zWavD/1/

Ben Barnett有一个jquery扩展 ,它增强了jquery,使用CSS3为某些属性设置动画(左边是其中之一)。

http://www.benbarnett.net/2010/09/01/enhancing-jquerys-animate-function-to-automatically-use-css3-transitions/

JQuery动画动画你交给它的属性,它不会尝试再次猜测属性列表(据我所知)

使用翻译而不是JQuery动画的唯一原因是,如果您关心iPad和iPhone上的最佳性能。 这些设备上的CSS转换是GPU卸载的(只要你使用translate3d,而不是translate2d),它们很快会出现在其他移动设备上,比如Android)以及Chrome和Safari等桌面浏览器。