提高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测试了这个。 我喜欢它给人的本土感受。