21

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;
}

ありがとう

4

2 に答える 2

20

翻訳によるトランジションは、モバイルデバイスではるかに優れたパフォーマンスを発揮します。

編集：これがライブデモです。との遷移は、、、translateXおよびtranslateYよりもはるかにスムーズです。 モバイルデバイス用のjsFiddleデモtopbottomleftright

于 2013-01-17T16:53:39.657 に答える
3

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

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

于 2013-12-27T12:55:03.200 に答える