0

モダナイザーは初めてで、css アニメーションがサポートされていない場合に css アニメーションを非表示にしてフラッシュの複製を表示する方法がわかりません。了解です 使ってます

if (Modernizer.cssanimation)

しかし、if ステートメントで必要なコード構造がわかりません。

どうもありがとう

4

1 に答える 1

-1

JavaScript でこれを行う必要はありません。CSS コードを使用できます。Modernizr は CSS クラスを<html/>タグに追加して、機能がサポートされているかどうかを示します。アニメーションの場合はcssanimations. modernizr が仕事をした後、Firefox 20 の HTML タグは次のようになります。

<html class=" js no-flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

flash オブジェクトを含むコンテナがあるとします。

<div id="container">
    <div id="flash">Here is the Flash animation</div><!-- <object .../> -->
    <div id="css">Here is the CSS animation</div>
</div>

次に、CSS アニメーションに対応していないブラウザー用に Flash ムービーを表示するデフォルトのスタイルを設定できます。

#css {
    display: none;
}

cssanimationsクラスを使用して代わりに CSS アニメーションを表示するようにスタイルを上書きします。

.cssanimations #flash {
    display: none;
}
.cssanimations #css {
    display: initial;
}

このデモを見て、IE8 以下および Chrome などの互換性のあるブラウザでテストしてください。IE では「Flash アニメーションはこちら」と表示されますが、Chrome では「CSS アニメーションはこちら」と表示されます。

もちろん、これは JavaScript が有効になっている場合にのみ機能します。JavaScript を無効にすると、最新のブラウザーでも Flash アニメーションが表示されます。

于 2013-04-22T02:38:03.043 に答える