web-dev-qa-db-fra.com

J'ai besoin d'une transition CSS3 pour travailler dans IE9

Je crée une carte de voeux pour un client avec transition css mais je ne savais pas qu'elle n'était pas compatible avec IE9.

La carte de voeux est celle-ci http://voeux.geekarts.fr/v4.html

Existe-t-il un moyen de faire fonctionner cela dans IE9? mettre un jQuery ou n'importe quel hack - quelque chose pour le faire fonctionner dans IE9.

Merci

internet-explorer-9css-transitions
22
15eme Doctor

Comme vous l'avez bien identifié, Internet Explorer 9 est le dernier des navigateurs IE à ne pas prendre en charge la propriété transition , ou animations . Cela étant dit, c'était aussi le dernier des navigateurs IE à prendre en charge commentaires conditionnels , afin que vous puissiez éventuellement mettre du code de secours dans un IE9- commentaire conditionnel uniquement, et fournissez-le comme solution à tous les utilisateurs IE9 (et inférieurs).

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

Ceci, bien sûr, ne serait fourni que dans le navigateur Internet Explorer 9 ou inférieur. Il ne vous reste plus qu'à configurer l'animation jQuery elle-même. Par exemple, nous pourrions exécuter une image à travers une série de transitions comme celle-ci:

(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

}());

Chaque fois que vous devez configurer une autre image clé , ajoutez simplement un autre appel à $.fn.animate et configurez votre état cible, ainsi que la durée de l'animation.

Une chose importante à noter est que vous devrez charger dans ne version de jQuery qui prend en charge votre cible IE versions . JQuery 2.x prend uniquement en charge Internet Explorer 9 cependant, jQuery 1.x prend en charge Internet Explorer versions 6 et supérieures.

J'espère que cela t'aides!

50
Sampson

Vous pouvez essayer l'approche inverse avec JQuery Transit http://ricostacruz.com/jquery.transit/

Il mappera les transitions de style JQuery aux transitions CSS3 et avec le code approprié (ci-dessous), si les transitions CSS3 ne sont pas disponibles, il peut se replier avec élégance sur JQuery standard.

JQuery Transit utilise une méthode Javascript simple, transition () pour effectuer chaque opération. La syntaxe est très similaire à JQuery animate ().

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

Si vous "mappez" la transition () vers JQuery animate (), il effectuera la même opération dans JQuery standard (si disponible). Le code suivant (extrait de la page d'exemple) utilisera animate () si les transitions CSS3 ne sont pas disponibles:

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

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