CSS3过渡性能的注意事项 [英] Considerations for CSS3 Transition Performance

问题描述

作为需要支持移动设备的项目的一部分，我一直在使用CSS3模拟iPhone切换控件。我有元素的外观和感觉在那里，并使用CSS3过渡动画其状态的变化。

As part of a project that needs to support mobile devices, I have been working on mimicking the iPhone toggle control using CSS3. I have the look and feel of the element pretty much there, and am using CSS3 transitions to animate its state change.

当我有元素本身在一个页面上没有否则，在iOS上的转换是相对平滑的。然而，当我结合它与其他CSS元素在一个页面上，在iOS中的结果是滞后的任何东西。它比一个原始的jQuery动画略好，但不是很多。

When I have the element itself on a page with nothing else, the transition is relatively smooth on iOS. However, when I combine it with other CSS elements on a page, the result in iOS is laggy as anything. It's slightly better than a raw jQuery animation, but not much.

我已经设置了两个测试页面来演示我的意思（差别在常规浏览器）：

I've set up two test pages to demonstrate what I mean (the difference is hardly noticeable in a regular browser):

自行切换控制> http://ben-major.co.uk/labs/iPhone%20UI/ios_toggle.html

与其他元素> http://ben-major.co.uk/labs/iPhone%20UI/

我正在寻找任何有关加快移动设备转换的建议。在全页测试中，哪些因素会降低其性能？

I am looking for any advice on speeding up the transition in mobile devices. What could be the factors that are slowing down its performance on the full page test?

欢迎任何意见和评论。

推荐答案

仔细这个，因为它可以改变应用的元素的z-index，但添加：

You have to be careful with this, as it can alter the z-index of the element it's applied to, but adding:

-webkit-transform-style: preserve-3d;

要应用转换的元素可以大幅加快动画效果，硬件使用硬件加速的动画。

To the element you're applying the transition to, can speed animation up considerably, as it forces the hardware to use hardware acceleration for the animation.

如果你遇到布局错误，你可以切换你的2d过渡到3d值，因此：

If you do encounter layout bugs, you can just switch your 2d transitions to 3d values, so:

-webkit-transform: translate(100px, 100px)

变成：

-webkit-transform: translate3d(100px, 100px, 0px)

您可以在 http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/# < a>

You can see a demo of how this helps speed things up, at http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/#

如果将此应用于元素后，您会看到它或其周围的元素在使用时闪烁，然后使用：

If after applying this to the element, you see it or elements around it blink upon use, then use:

-webkit-backface-visibility: hidden;

到元素，这应该可以解决问题。

To the element, and that should correct the problem.

这些提示帮助我生成快速，高效的CSS过渡，希望他们帮助。 ：）

These tips have helped me to produce fast, efficient CSS transitions, hope they help. :)

这篇关于CSS3过渡性能的注意事项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！