提高 iPad 上的 CSS3 速度

Question

iOS 总体上在 CSS3 过渡、动画、变换等方面表现不佳。在我看来，这是该技术的一些最佳功能。

现在，我听说你可以通过引入一些随机 3D 变换等来欺骗 iOS 来初始化其硬件加速。所以我随机变换了一个 div 并将其放在屏幕上（甚至没有隐藏它），但体验仍然很糟糕...

有什么方法可以提高 iOS 上 CSS3 过渡、变换、动画等的性能？或者说网络应用程序注定会成为原生应用程序的仿制品？

编辑：这是有问题的代码...

http://www.abhi.my/sl/html/< /a>

只需点击该链接，您就会看到我放在一起的一个小演示...在桌面浏览器上查看时，动画很流畅且可以接受，iOS 上的同一网站则受到影响...这个是为iPhone 4...

随意查看源代码并指出一些事情...

Answer 1

3D 变换在 iOS 上是硬件加速的，因此您所要做的就是在执行此操作时使用 3D 语法，并且它的性能非常好 - 至少在 3GS 及更高版本上。

但是您在示例中没有使用变换，而是在位置上使用过渡，这是完全不同的，是的 - 导致移动设备上的帧速率很差。

相反，您应该使用 -webkit-transform:translate3d(-100%,0,0) （或合适的类似物）。您可以从本页中的示例中看到这有多流畅。

Answer 2

您绝对应该使用-webkit-transform而不是-webkit-transition。话虽如此，为了跨浏览器支持和易用性，我肯定会使用 jQuery Transit< /a> 允许您在 iOS 以及 Android 和其他移动设备上轻松创建平滑、类似本机的过渡和效果。

jQuery 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 对此进行了测试。我喜欢它给人的原生感觉。