2012-10-29 19 views
14

私のウェブサイトにはいくつかのCSSアニメーションとトランジションがありますが、一部のブラウザでは非常にゆっくりとレンダリングされます。私はUAの盗聴を避けようとしています。 JavaScriptやJSライブラリを使用してブラウザやハードウェアの設定を検出する方法がありますか?そして、それらの機能をうまくサポートしていないブラウザのアニメーション化されていないバージョンを読み込んでいますか?JavaScriptを使用した低速ハードウェア/低速ブラウザの検出

あいまいさを解消するために、私はModernizrのようなものを探していません。素子をオフロード、

Use CSS transitionsと(必要に応じてクラスをトグルすることにより)jQueryを使ってそれらをトリガする:これはないことである

+1

私はいくつかのタイミング検出を自分で書くことをお勧め、あなたの特定のニーズに合わせて「遅い」は、特に特定のデバイスやハードウェアが特定の機能に対してアクセラレーションを持っている場合には、一般化されすぎています。 – Brad

+2

私はむしろ、ユーザーが好きなほど正確でないかもしれない「遅いハードウェア」を検出するという面倒な作業よりも、そのようなアニメーションを無効にするオプションを提供したいと考えています。 –

+1

@FabricioMatte:私の箱で何かが遅く、重要な項目(銀行/請求書の支払い)ではない場合、私はそれを無効にする方法を探すのではなくむしろタブをクリックします。 –

答えて

3

に十分に遅いシステムを検出し、そのようなシステムのユーザーへの影響を最小にする手段アニメーションをレンダリングエンジンに送り、ページの機能的な応答性が少なくとも損なわれないようにする。

正しい CSSプロパティを使用してください。たとえば、top:10px;left:10px;のプロパティをアニメートするのではなく、より効率的なCSS transformtransform: translateX(10px) translateY(10px)を使用します。

transform: translate3d(0,0,0);などの回避策をターゲット要素に追加して、ハードウェア(GPU)アクセラレーションをトリガします。

あなたは絶対にアニメーションに添付、または何らかの理由でCSSなし(表示/非表示/要素を再配置)フォールバック機能をトリガーする必要があり、you could try a Modernizr workaroundしている場合:

if(!Modernizr.csstransitions) { 
    /*fallback logic*/ 
} 
+0

私はCSSトランジションとトランスフォームを使用しており、この技術に精通しています。 jQueryでトランジションとトランスフォームをトリガする方法を詳しく説明できますか? – Jules

+0

@Verandaguy:jQueryは、「中間」プロパティ値を反復的に調整するのではなく、「最終」プロパティ値(アニメーション化される)を調整するために使用できることを意味します。おそらくこれは[徹底的な例](http://www.the-art-of-web.com/javascript/css-animation/)でよりよく説明されるでしょうか? –

関連する問題