J'ai besoin de CSS3 transition vers le travail dans IE9

J'ai créer une carte de voeux pour un client avec une transition css mais je ne savais pas que c'était pas compatible avec IE9.

La carte de vœux est ce http://voeux.geekarts.fr/v4.html

Est-il un moyen d'obtenir ce travail dans IE9 ? mettre un jQuery ou tout hack - quelque chose pour le faire fonctionner dans IE9.

Grâce

InformationsquelleAutor 15eme Doctor | 2013-12-19
  1. 50

    Comme vous l'avez correctement identifié, Internet Explorer 9 est la dernière de l'IE les navigateurs ne prennent pas en charge la transition de la propriété, ou animations. Cela étant dit, c'était aussi la dernière de l'IE navigateurs à supporter les commentaires conditionnels, de sorte que vous pourrait éventuellement mettre de secours du code dans une IE9-seul commentaire conditionnel, et de le livrer comme solution à tous les IE9 (et en dessous) des utilisateurs.

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

    Cela, bien sûr, ne serait livré dans le navigateur est Internet Explorer 9 ou ci-dessous. Maintenant, tout ce que vous avez à faire est de configurer le jQuery animation elle-même. Par exemple, nous pourrions faire une image à travers une série de transitions comme ceci:

    (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 avez besoin pour configurer un autre image clé, il suffit d'ajouter un autre appel à $.fn.animer et l'installation de votre état cible, ainsi que de l'animation de la durée.

    Une chose importante à noter est que vous aurez besoin de charger en une version de jQuery qui prend en charge votre cible versions IE. jQuery 2.x prend uniquement en charge Internet Explorer 9 et plus, cependant, jQuery 1.x prend en charge les versions d'Internet Explorer 6 et plus.

    Espérons que cette aide!

    • Salut, avez-vous un lien pour que animation-legacy-support.js?
    • C'était une suggestion de nom de fichier pour le code ci-dessus. Il n'existe pas, jusqu'à ce que vous la faire 🙂
    InformationsquelleAutor Sampson
  2. 3

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

    Il carte JQuery style transitions en CSS3 transitions et avec le code approprié (ci-dessous), si les transitions CSS3 ne sont pas disponibles, il peut de secours gracieusement à la norme JQuery.

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

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

    Si vous "carte" de transition() de JQuery animate (), il va effectuer la même opération dans la norme JQuery (si disponible). Le code suivant (pris à partir de la page d'exemple) va utiliser animate() si 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;
    InformationsquelleAutor FrancescoMM