IE9で動作するにはCSS3トランジションが必要

Question

私はcssトランジションでクライアント用のグリーティングカードを作成しましたが、IE9と互換性がないことはわかりませんでした。

グリーティングカードは、このhttp://voeux.geekarts.fr/v4.html

はIE9でこの作業を取得する方法はありますか？ jQueryやその他のハッキングを置くこと - IE9で動作させるためにはいくつかのことがあります。

おかげ

Answer 1

あなたが適切に識別きたように、Internet Explorer 9のはtransition property、またはanimationsをサポートしていないためにIEブラウザの最後でした。つまり、conditional commentsをサポートするのはIEブラウザの最後でもありました。だから、フォールバックコードをIE9のみの条件付きコメントに入れて、それをあなたのすべてのIE9（以下）ユーザーに提供することができます。

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

これはもちろんInternet Explorer 9以下でのみ提供されます。これで、jQueryアニメーション自体をセットアップするだけです。例えば、我々はこのような一連の遷移を介して画像を実行できます。

(function() { 

    "use strict"; 

    $("img.kitten") 
     .animate({ width: 300 }, 1000) // Animate to 300px wide 
     .animate({ width: 50 }, 2000) // Then, to 50px wide 
     .animate({ opacity: .25 }, 1000); // Then, make it semi-transparent 

}()); 

あなたが別ののキーフレームセットアップに必要なたびに、ちょうど別$.fn.animateへの呼び出しと設定、あなたのターゲットの状態だけでなく、追加しますアニメーション期間。

重要なことは、a version of jQuery that supports your target IE versionsにロードする必要があることです。 jQuery 2.xはInternet Explorer 9以上しかサポートしていませんが、jQuery 1.xはInternet Explorer 6以上をサポートしています。

希望すると便利です。

Answer 2

あなたはjQueryのトランジットとは逆のアプローチを試すことができます http://ricostacruz.com/jquery.transit/

それはCSS3の遷移にjQueryのスタイル遷移をマップするとCSS3のトランジションが利用できない場合、適切なコード（下記）で、その後、それが優雅にフォールバックする

標準のJQuery

JQuery Transitでは、単純なJavascriptメソッドtransition（）を使用してすべての操作を実行します。構文はJQuery animate（）と非常によく似ています。

$('.box').transition({ opacity: 0 }); 

あなたはjQueryののアニメーションへの移行を（）「マップ」した場合（利用可能な場合）（）は、標準のjQueryで同じ操作を実行します。 CSS3トランジションが使用できない場合（例えば、ページから取られた）次のコードは、アニメーションを（）を使用します：

// Delegate .transition() calls to .animate() 
// if the browser can't do CSS transitions. 

if (!$.support.transition) 
    $.fn.transition = $.fn.animate;