2011-01-20 4 views
4

私が作っているHTML5/CSS3デモでは、主にパフォーマンスを向上させるためにCSSトランジションを使用しています。CSS3のパフォーマンスですか?左に動かすかtranslateX

私は自分のUIが不思議でした。たとえば、現在のところ、JQueryがマウスの位置に基づいてコンテナDivのLEFT属性を操作する代わりに、代わりにtransform: translateX(tx)を使用する必要がありますか?ブラウザがサポートしている場合、JQueryは自動的にこれを行いますか?

答えて

4

jqueryでは代わりにtransform:translateX(tx)を使用していません。 あなたは手動で行う必要があります。しかし、その実際にはるかに速いので、これを行うための良い練習。

http://jsfiddle.net/MZBtr/2/

あなたは、特徴検出のためのMondernizrを使用し、その結果に応じて何をするかを決めることができました。ここで

それを実証デモ: http://jsfiddle.net/zWavD/1/

+0

ああ、私は '$(" div ").ss(" - webkit-transform "、" translate(45px、0) ")を使用します。 cssにトランジションを追加します。 – davivid

+0

いいえ、CSSでのみ行い、互換性のないブラウザではJSをフォールバックとして使用します。あなたが何をしたいのか教えてもらえれば、私はデモを作ることができます – meo

+0

私は自分の投稿を編集して、私が何を意味するかを見せてくれます。 – meo

0

jQueryのアニメーションは、あなたがそれを手プロパティをアニメーション化し、それは(私の知る限り)は、第2のプロパティリストを推測しようとしない

あなたならば、むしろjQueryのアニメーションよりも翻訳を使用する唯一の理由ですiPadとiPhoneで最高のパフォーマンスを心がけてください。 CSS変換はこれらの端末でGPUオフロードされます(translate3dではtranslate2dではなく、Androidなどの他の携帯端末やChrome、Safariなどのデスクトップブラウザに移行します)。

+0

素晴らしい私はこれがモバイルデバイスに大きく役立つでしょう。 – davivid

関連する問題