15

許容できるパフォーマンスで単純な移行を行うのに 4 時間かかりました。

最初にこのコードを試しました：

left: 2000px;
-webkit-transition: left 1s linear;
-moz-transition: left 1s linear;
-ms-transition: left 1s linear;

結果は、Chrome v21.0.1180.89 と FireFox v15.0.1 では最悪でしたが、IE10 では良好でした。CPU 使用率と GPU 使用率のグラフをキャプチャしたところ、chrome は基本的な CSS プロパティに GPU を使用していないことがわかりましたここに画像の説明を入力 ここに画像の説明を入力 。

4

2 に答える 2

23

要素を移動するために left または top、bottom、margin、または padding プロパティを使用しないでください。「transform: translate」のみを使用してください。

同様に、要素のサイズを変更するには、高さや幅の代わりに "transform: scale" のみを使用します。

左、上、下、マージン、パディング、高さ、幅のプロパティ (およびその他の多く) により、ブラウザーはすべてのレイアウトを強制的に再計算するため、多くの要素のジオメトリが多くの CPU 作業を伴います。

各プロパティには異なる重みがあります。この記事では、高パフォーマンスのアニメーションについて明確に説明してい ます

Edit1:各プロパティの重みを覚えていない場合は、 triggers.com が適切なページのようです

于 2015-03-01T22:09:38.243 に答える
18

私の4時間の実験の結果として、以下のような変換を使用することをお勧めします:

        -webkit-transform: translate(2000px, 0);
        -webkit-transition: -webkit-transform 1s linear;
        -moz-transform: translate(2000px, 0);
        -moz-transition: -moz-transform 1s linear;
        -ms-transform: translate(2000px, 0);
        -ms-transition: -ms-transform 1s linear;

これは、IE10、Chrome v21.0.1180.89、および FireFox v15.0.1 で優れていました。

注: IE9 は tarnsforms をサポートしていません

于 2012-09-10T08:16:08.063 に答える