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）（或合适的模拟）。您可以看到the example in this page.

的平滑程度

Answer 2

您绝对应该使用 -webkit-transform 而不是-webkit-transition。话虽如此，对于跨浏览器支持和易用性，我肯定会使用jQuery Transit这样的插件，它允许您轻松地在iOS以及Android和其他设备上创建流畅的，原生的过渡和效果移动设备。

Example JSFiddle of jQuery Transit in action

代码示例：

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

提高iPad上的CSS3速度

2 个答案: