什么是“黄金法则”？增加移动设备上的CSS3过渡性能？ [英] What are the "golden rules" to increase CSS3 transition performance on mobile devices?

问题描述

我在我的应用程序中使用了一些非常简单的CSS3过渡，如下例所示，我尝试从左到右滑入div容器：

I am using some really simple CSS3 transitions in my app like in the following example where I try to slide in a div container from left to right:

<div id="navi">
    <form>
        <input>...</input>
    </form>
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>

<div id="bg">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
</div>

#navi{
 z-index:2;
 position:fixed;
 -webkit-transform:translateZ(0);
 -webkit-transform-style: preserve-3d;
 -webkit-backface-visibility: hidden;
 -webkit-transition:left 0.5s;
 left:0;
 top:0;
 bottom:0;
 width:95%;
 overflow-x:hidden;
 overflow-y:auto;
 -webkit-overflow-scrolling:touch;
}

.slidein{
 left:500px;
}

要滑入/滑出div，我会这样做：

To slide in/out the div I do:

$("#navi").toggleClass("slidein");

在我的iPhone 4s上，这种过渡非常顺利。在iPhone 4上，性能非常糟糕。

On my iPhone 4s this transition is very smooth. On an iPhone 4 performance is horrible.

我能做些什么来提高性能？有没有黄金法则或最佳做法？

Is there anything that I can do to increase performance? Are there any "golden rules" or best practices?

到目前为止我只知道：

• 使用 -webkit-transform：translateZ（0）来触发硬件加速


• 使用-webkit-transform-style ：preserve-3d;


• 使用-webkit-backface-visibility：hidden;


• 避免渐变


• 避免盒子阴影

• Use -webkit-transform:translateZ(0) to trigger hardware acceleration
• Use -webkit-transform-style: preserve-3d;
• Use -webkit-backface-visibility: hidden;
• Avoid gradients
• Avoid box-shadow

我的一个主要问题是 #navi里面有很多物品类似< ul> ，包含许多< li> 元素。
在 #navi 下面还有另一个带有相当大图像的div元素。这些似乎也会降低性能（当我在它们上使用 display：none 时，性能会上升，但这不是一个选项，因为它们需要在幻灯片转换期间可见） 。

One of my main problems is that there are quite a lot of items inside #navi like a <ul> with many <li> elements. Underneath #navi there is a also another div element with quite some large images. These seem to decrease performance as well (At least performance goes up when I use display:none on them but that's not an option since they need to be visible during the slide transition).

推荐答案

尝试动画转换而不是左属性，即使是旧的iOS设备也能正常运行。

Try to animate transform instead of left property, it works really smooth on even old iOS devices.

#navi {
  transition: -webkit-transform .5s ease;
  -webkit-transform: translate3d(0, 0, 0);
}
#navi.slidein {
  -webkit-transform: translate3d(500px, 0, 0);
}

小提琴： http://jsfiddle.net/x8zQY/2/

2017/01更新：请阅读这篇关于动画和文章的精彩文章GPU渲染，分析和优化技术 https：// www。 smashingmagazine.com/2016/12/gpu-animation-doing-it-right/

2017/01 update: Please read this great article about animation & GPU rendering, profiling and optimising techniques https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/

这篇关于什么是“黄金法则”？增加移动设备上的CSS3过渡性能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！