提高iPad上的CSS3速度

Question

iOS整體往往會受到CSS3過渡，動畫，變換等的影響。哪種IMO是該技術的一些最佳功能。

現在，我聽說你可以通過投入一些隨機的3D變換來欺騙iOS來初始化它的硬件加速。 所以我改造了一個隨機的div並把它放在屏幕上（甚至沒有把它隱藏起來），而且經驗仍然隨之而來......

有沒有辦法在iOS上提高CSS3過渡，轉換，動畫等的性能？ 或者，網絡應用程序注定要成為本機應用程序的塑料嗎？

編輯：這是有問題的代碼......

http://www.abhi.my/sl/html/

只需按照這個鏈接，你就會看到我放在一起的一個小小的演示......當在桌面瀏覽器上觀看時，動畫很流暢且可以接受，iOS上的同一個網站受到了影響......這個版本適用於iPhone 4 ...

隨意瀏覽消息來源並指出問題......

Answer 1

3D變換在iOS上是硬件加速的，所以你要做的就是在你做的時候使用3D語法，並且它表現很好 - 至少在3GS及以上。

但是你沒有在你的例子中使用變換，你正在使用位置轉換，這是完全不同的，是的 - 導致移動設備上的蹩腳fps。

相反，您應該使用-webkit-transform：translate3d（-100％，0,0）（或合適的模擬）。 您可以在此頁面的示例中看到它的平滑程度。

Answer 2

你絕對應該使用-webkit-transform而不是-webkit-transition。 話雖如此，對於跨瀏覽器支持和易用性，我肯定會使用jQuery Transit這樣的插件，它允許您輕松地在iOS以及Android和其他移動設備上創建流暢的，原生的過渡和效果。

JSQuery Transit的JSFiddle實例

代碼示例：

HTML：

<div class="moveMe">
    <button class="moveUp">Move Me Up</button>
    <button class="moveDown">Move Me Down</button>
    <button class="setUp">Set Me Up</button>
    <button class="setDown">Set Me Down</button>
 </div>

使用Javascript：

$(".moveUp").on("click", function() {
    $(".moveMe").transition({ y: '-=5' });
});

$(".moveDown").on("click", function() {
    $(".moveMe").transition({ y: '+=5' });
});

$(".setUp").on("click", function() {
    $(".moveMe").transition({ y: '0px' });
});

$(".setDown").on("click", function() {
    $(".moveMe").transition({ y: '200px' });
});

其他人已經為你做了很多艱苦的工作。 我無法忍受修補CSS3動畫，這個插件令人驚訝地完成了它的工作。 我用iPad，iPod Touch，iPhone和Android測試了這個。 我喜歡它給人的本土感受。