2016-04-07 11 views
4

this tutorialのコードを変更しました。これは、divのスライディングをアニメーション化して切り替えメニューとして機能します。私はIE9の通常のhide-showに劣化することを期待していました。それはどれですか。しかし、一度だけ。最初のボタンをクリックするとdivのオン/オフが切り替わります。それはそのような4つすべてのために働く。しかし、最初のトグルの後、IEはdivを再度表示することができません。私はng-clickがクリックされたボタンのインデックスを記録することによって動作していることを確認できます。ただし、何らかの理由でdisplayプロパティがblockに設定されていないようです。 ngAnimateがIE9をエラーなく破損させる既知の問題はありますか?ngAnimateはIE9で部分的にしか劣化しません

JSBIN

+0

あなたのページにJqueryが含まれていますか? –

+0

@IsmailFarooqはい、私は – 1252748

+0

@thomasを持っています。私はそれがあなたの質問に関連していないことを知っていますが、バディ、あなたはまだIE9と古いバージョンについて気にしていますか? ;) まだサポートが必要な場合は、それを動作させるためにいくつかのモダナイザライブラリを追加してください。 –

答えて

5

In angularjs siteあなたはこれを見つける:

は、最新のブラウザは、CSSトランジション とCSSアニメーション、IE9のための良いサポートを持っており、それ以前のものではないが。古いブラウザで下位互換性のあるアニメーション を使用する場合は、 JavaScriptベースのアニメーションを使用することを検討してください。詳細については後述します。

実際に:この行を削除すると:transition: all 0.8s;すべてのブラウザが同じように動作することがわかります。

ソリューション:

のInternet Explorer 9あなたがIE9にフォールバックコードを置くことができるように、あなたがhereを見ることができるように遷移プロパティをサポートしないようにIEブラウザの最後、またはアニメーションだったが、条件付きコメントをサポートしています単なる条件付きコメントであり、それをすべてのIE9(および以下の)ユーザーにソリューションとして提供します。

<!--[if lte IE 9]> 
    <script src="animation-legacy-support.js"></script> 
<![endif]--> 

それとも、このようmodernizrライブラリを使用することができますようIE6 +のために、

if(!Modernizr.csstransitions) { // if not supported. 
//ADD YOUR javascirpt-based CODE HERE 
} 

またはあなただけのjQueryを使ってすべてのアニメーションを作ることができIE9 +またはjqueryの1.xのための使用のjqueryの2.xのをhereが表示されます。

注:anglejsのサイトのAnimating ngClass with JavaScriptの章の下部には、角度およびjqueryアニメーションの例があります。

+1

非常に嬉しい答えトム! – atefth

+0

ありがとうございます。これらが最良の選択肢であることを知っておくとよいでしょう。 – 1252748

-1

は、私の知る限りでは、CSSの遷移がIE9でサポートし、以前されていません。したがって、これらのブラウザをサポートしたい場合は、代わりにjQueryアニメーションを使用することができます。

これは役に立ちます。

関連する問題