2

CSS3 translate3d ディレクティブを使用して一部のモバイル デバイス (iPhone など) でハードウェア アクセラレーションを強制する方法については、ウェブ上にいくつかの参考文献があります。ただし、これらのほとんどは translate3d について非常に詳細に説明していますが、正確な使用方法を説明しているものはありません。私のアニメーションはまだ少しぎこちないので、それを正しく実装したとしても、私はさまよっていることに気づきます。私の質問は次のとおりです。

1: アニメーション化する要素 (動的に作成される要素) (スライドインなど) に適用しますか? それとも、たとえば body 要素にグローバルに適用しますか?

2: 要素が動的に作成されているときにスタイル ルールをプログラムで要素に適用する方が良いですか、それとも css ルール (たとえばクラス) を作成し、そのルールを要素に適用する方が良いですか (何らかの形式のプリコンパイルがあるかどうか)。それが起こるか、パフォーマンスが向上しますか?)

3: シルクのように滑らかなユーザー エクスペリエンスを得るために利用できる他のトリックはありますか? 迅速な勝利か、複雑な回避策か?

ありがとう

4

2 に答える 2

1

-webkit-transform: translate3d(0, 0, 0);

この css プロパティを任意の要素に適用すると、デバイスでハードウェア アクセラレーションが強制的に使用されます。「空白のギャップ」などのIpad2でのレンダリングの問題を解決するために適用しました

これを適用すると、デバイスにとって非常に重いため、アプリがクラッシュする可能性があると言っています。私のアドバイス; いくつかの要素に適用する場合は、このトリックを使用してください。

http://davidwalsh.name/translate3d

于 2013-01-29T18:16:20.270 に答える
0

1）正直なところわかりません：P要素にのみ遷移を適用するために行きます。

2）スタイルルールを適用するよりも、クラスを変更する方が高速です。出典：http ：//www.quirksmode.org/dom/classchange.html また、スタイルと動作を分離します。デスクトップOperaの最新バージョンは、他のブラウザと同じように動作します。でも、モバイルブラウザについてはわかりません。

3）技術的な最適化については、 yslowおよびpagespeedfirefoxアドオンを確認してください。ここにほとんどの推奨事項の編集があります：http：//developer.yahoo.com/performance/rules.html

于 2011-09-01T04:59:55.817 に答える