web-dev-qa-db-ja.com

transform：translateXと左プロパティの遷移。どちらがパフォーマンスが優れていますか？ CSS

私はHTMLとCSS3でスライドアウトメニューを作成しています-特にトランジション。

相対的に配置されたdivを水平にスライドさせるためのベストプラクティス/ベストパフォーマンスについて教えてください。ボタンをクリックすると、divにクラスが追加されます。どのクラスが良いですか？ （私は後ですべてのブラウザープレフィックスを追加でき、このサイトは最新のブラウザーのみを対象としています）。

//option 1
.animate{
    -webkit-transition:all ease 0.3s;
    -webkit-transform:translateZ(200px);
}

//option 2
.animate{
    -webkit-transition:all ease 0.3s;
    left:200px;
}

ありがとう

csscss-transitionscss-transforms
14
JackMahoney

Translateによる移行は、モバイルデバイスでのパフォーマンスが大幅に向上します！

編集：ここにライブデモがあります。 translateXおよびtranslateYの遷移は、top、bottom、leftおよびrightよりもスムーズです。 jsFiddle Demo for mobile devices

13
Philipp Kühn

translateXとtranslateYは、左、右、上、下、jQueryアニメーションバージョンよりもはるかにスムーズです。デモの詳細については、こちらをご覧ください。

http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

3
Yogesh Yadav