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");

私のiPhone4sでは、この移行は非常にスムーズです。iPhone4ではパフォーマンスはひどいです。

パフォーマンスを向上させるためにできることはありますか？「ゴールデンルール」またはベストプラクティスはありますか？

これまでのところ、私は知っているだけです：

  • -webkit-transform:translateZ(0)ハードウェアアクセラレーションをトリガーするために使用します
  • 使用する-webkit-transform-style: preserve-3d;
  • 使用する-webkit-backface-visibility: hidden;
  • グラデーションを避ける
  • 避けるbox-shadow

私の主な問題の1つは、多くの要素を持つの#naviように、内部に非常に多くのアイテムがあることです。その下には、かなり大きな画像を含む別のdiv要素もあります。これらもパフォーマンスを低下させるようです（少なくとも、これらを使用するとパフォーマンスが向上しますが、スライドの移行中に表示する必要があるため、これはオプションではありません）。<ul><li>#navidisplay: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 に答える