Ich brauche CSS3 Übergang in IE9 arbeiten

Question

Ich erstelle eine Grußkarte für einen Client mit CSS-Übergang, aber ich wusste nicht, dass es nicht kompatibel mit IE9 war.

Die Grußkarte ist diese http://voeux.geekarts.fr/v4.html

Gibt es eine eine Möglichkeit, diese Arbeiten in IE9 zu bekommen? eine jQuery oder irgendeinen Hack setzen - etwas, um es in IE9 zum Laufen zu bringen.

Dank

Answer 1

Wie Sie richtig festgestellt haben, war Internet Explorer 9 die letzte der IE-Browser nicht die transition property oder animations zu unterstützen. Nichtsdestoweniger war es auch der letzte IE-Browser, der conditional comments unterstützt, sodass Sie Fallback-Code möglicherweise in einen ausschließlichen IE9-Kommentar einfügen und dies als Ihre Lösung für alle IE9-Benutzer (und darunter) bereitstellen können.

Dies würde natürlich nur im Browser Internet Explorer 9 oder darunter geliefert werden. Jetzt müssen Sie nur noch die jQuery-Animation selbst einrichten.

(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 

}()); 

Jedes Mal, wenn Sie brauchen, um Setup eine andere Keyframe, fügen Sie einfach einen weiteren Anruf zu $.fn.animate und Einrichtung Ihrer Zielzustand sowie das: Zum Beispiel könnten wir ein Bild durch eine Reihe von Übergängen wie folgt ausführen Animationsdauer.

Eine wichtige Sache zu beachten ist, dass Sie in a version of jQuery that supports your target IE versions laden müssen. jQuery 2.x unterstützt nur Internet Explorer 9 und höher, jQuery 1.x unterstützt jedoch Internet Explorer ab Version 6.

Hoffe, das hilft!

Answer 2

können Sie versuchen, den umgekehrten Weg mit JQuery Transit http://ricostacruz.com/jquery.transit/

Es JQuery Stil Übergänge zu CSS3 Übergänge abbildet und mit dem entsprechenden Code (siehe unten), wenn die CSS3 Übergänge nicht verfügbar sind, dann kann es Rückfall anmutig Standard JQuery.

JQuery Transit verwendet eine einfache JavaScript-Methode, transition(), um jede Operation auszuführen. Syntax ist sehr ähnlich zu JQuery animate().

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

Wenn Sie "Karte" Übergang() zu JQuery belebten() wird die gleiche Operation in Standard JQuery durchführt (falls vorhanden). Der folgende Code (von der Beispielseite genommen) wird verwenden belebtes(), wenn CSS3 Übergänge nicht verfügbar sind:

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

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