私は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;
}
ありがとう
Translateによる移行は、モバイルデバイスでのパフォーマンスが大幅に向上します!
編集:ここにライブデモがあります。 translateX
およびtranslateY
の遷移は、top
、bottom
、left
およびright
よりもスムーズです。 jsFiddle Demo for mobile devices
translateXとtranslateYは、左、右、上、下、jQueryアニメーションバージョンよりもはるかにスムーズです。デモの詳細については、こちらをご覧ください。
http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/