10

我在我的应用程序中使用了一些非常简单的 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;
  • 避免渐变
  • 避免box-shadow

我的主要问题之一是里面有很多项目，#navi比如 a<ul>有很多<li>元素。下面#navi还有另一个 div 元素，其中包含一些大图像。这些似乎也降低了性能（至少在我使用display:none它们时性能会提高，但这不是一个选项，因为它们需要在幻灯片转换期间可见）。

4

1 回答 1

11

尝试动画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/

于 2013-01-11T18:06:06.173 回答