在移动设备上提高CSS3过渡性能的"黄金规则"是什么？

Question

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

<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,我会:

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

在我的iPhone 4s上,这种过渡非常顺利.在iPhone 4上表现可怕.

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

到目前为止我只知道:

• 使用-webkit-transform:translateZ(0)触发硬件加速
• 使用-webkit-transform-style:preserve-3d;
• 使用-webkit-backface-visibility:hidden;
• 避免渐变
• 避免盒子阴影

我的一个主要问题是内部有很多项目,#navi比如<ul>有许多<li>元素.在下面#navi还有另一个div元素,有很多大图像.这些似乎也会降低性能(当我使用display:none它们时,至少性能会上升,但这不是一个选项,因为它们需要在幻灯片转换期间可见).

Answer 1

尝试动画transform而不是left属性,它甚至在旧的iOS设备上也能很流畅.

#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/