CSS3性能？動畫左或translateX

在我做的一個HTML5/CSS3演示中，我使用CSS轉換主要是爲了加速性能。CSS3性能？動畫左或translateX

我想知道我的UI - 在目前的JQuery操縱容器Div的LEFT屬性基於鼠標的位置，例如，我應該改用transform: translateX(tx)呢？或者如果瀏覽器支持它，JQuery會自動執行此操作嗎？

2011-01-20 davivid

jquery不使用transform：translateX（tx）代替。你必須這樣做manualy。但這是一個很好的做法，因爲它實際上要快得多。

你可以使用Mondernizr爲特徵檢測，然後決定如何根據結果做。

2011-01-20 16:30:50 meo

oh right，所以我會使用`$（「div」）.css（「 - webkit-transform」，「translate（45px，0）」）`例如當定位到鼠標時，如果我想動畫我也會添加一個轉換到CSS。 – davivid 2011-01-20 18:03:21

JQuery的動畫動畫，你把它的屬性，它並不試圖揣摩屬性列表（據我所知）

使用翻譯，而不是JQuery的動畫的唯一原因是，如果你關心iPad和iPhone上的最佳性能。這些設備上的CSS轉換是GPU卸載的（只要您使用translate3d，而不是translate2d），並且很快它們將會在Android等其他移動設備上）以及Chrome和Safari等桌面瀏覽器。

2011-01-20 16:28:03

真棒我忘了這將大大有助於移動設備。 – davivid 2011-01-20 17:39:28

有一個jQuery的擴展由本·巴尼特，增強jQuery的動畫某些屬性（左圖是其中之一），使用CSS3。

2011-02-21 09:23:21 Ridcully

回答