1

私はこのフィドルを作成しました; 赤いボックスはCSSleftプロパティでアニメーション化し、青いボックスはCSSTransformプロパティでアニメーション化しTranslateXます。

Chrome 21では、両方のアニメーションのパフォーマンスが同じで、どちらもスムーズに実行されます。

しかし、Safari(Windows用)では、青いものはスムーズにアニメーション化しますが、赤いものは遅れます。(青いものはハードウェアアクセラレーションされているようですが、赤いものはそうではありません)

最初の質問は、最良の選択は何ですか?全体的にどちらが優れていますか?(より多くのブラウザによるサポートなど)

そして次に、SafariのアニメーションleftとCSSプロパティをハードウェアで高速化する方法はありませんか?top(実際にウィンドウの外側に移動したいので、プロパティdivを使用する方が良いと思いますleft。)

4

1 に答える 1

1

Translateは、DOM内の位置に影響を与えることなく、オブジェクトを移動するためにあります。目に見えて画面上の別の場所に移動しますが、DOMは影響を受けません。これが、変換機能のパフォーマンスが一般的に優れている理由です。

すべてのブラウザで同じパフォーマンス特性が表示されるわけではないことに注意してください。

これは、さまざまな変換/移動機能のJSPerfの概要です。一番下までスクロールして、ブラウザごとの統計を表示します。

将来的には変更される可能性があります。

于 2012-08-22T13:15:06.950 に答える