la détection de css de soutien à la transition avec modernizr

Je vais utiliser transition css et jquery plugin comme solution de repli pour les navigateurs qui ne supportent pas. Je veux utiliser modernizr pour détecter les css de soutien à la transition. C'est overkill pour charger l'intégralité de la bibliothèque pour cela, j'ai seulement envie de prendre la portion de code que j'ai besoin de détecter la transition css. dans le page de téléchargement de modernizr, il y a beaucoup d'options et extras qui me confondre. Ma question est de savoir quelles options dois-je choisir pour détecter efficacement la transition css?

la détection de css de soutien à la transition avec modernizr

<script type="text/javascript">
//modernizr
</script>


<script type="text/javascript">
    if(!Modernizr.csstransitions) { 
     //Use jquery if CSS transitions are not supported
    }
</script>
Si vous voulez dynamiquement travailler avec de soutien à la transition css3 et jQuery de base, puis vérifier cela article.

OriginalL'auteur NL500 | 2011-08-07

  1. 7

    Voici le code dont vous avez besoin à partir de la Modernizr de la bibliothèque. C'est seulement de 1 ko.

    ;window.Modernizr=function(a,b,c){function z(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+m.join(c+" ")+c).split(" ");return y(d,b)}function y(a,b){for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function x(a,b){return!!~(""+a).indexOf(b)}function w(a,b){return typeof a===b}function v(a,b){return u(prefixes.join(a+";")+(b||""))}function u(a){j.cssText=a}var d="2.0.6",e={},f=b.documentElement,g=b.head||b.getElementsByTagName("head")[0],h="modernizr",i=b.createElement(h),j=i.style,k,l=Object.prototype.toString,m="Webkit Moz O ms Khtml".split(" "),n={},o={},p={},q=[],r,s={}.hasOwnProperty,t;!w(s,c)&&!w(s.call,c)?t=function(a,b){return s.call(a,b)}:t=function(a,b){return b in a&&w(a.constructor.prototype[b],c)},n.csstransitions=function(){return z("transitionProperty")};for(var A in n)t(n,A)&&(r=A.toLowerCase(),e[r]=n[A](),q.push((e[r]?"":"no-")+r));u(""),i=k=null,e._version=d,e._domPrefixes=m,e.testProp=function(a){return y([a])},e.testAllProps=z;return e}(this,this.document);

    Par exemple, vous pouvez tomber en arrière avec le code suivant et de servir de jQuery alimenté animations pour les navigateurs qui ne supportent pas les Transitions CSS3:

    if (!Modernizr.csstransitions) {
$(document).ready(function(){
$(".test").hover(function () {
$(this).stop().animate({ color: "#F00" },700)
}, function() {
$(this).stop().animate({ color: "#AAA" },700)}
);
});
}

    OriginalL'auteur Faraz Kelhini

  2. 4

    CSS Transactions n'existent pas, je pense que vous êtes à la recherche pour les transitions CSS. C'est au fond de la CSS3 colonne.

    Vous avez raison. Mon erreur. Donc, j'ai seulement besoin de sélectionner les transitions CSS et inclure le code généré dans ma page?
    Oui, si les transitions sont la seule chose dont vous avez besoin.

    OriginalL'auteur ZippyV

  3. 4

    Il vous suffit de cocher la CSS transitions de la boîte. Il sera automatiquement cocher quelques cases en bas à droite, je l'avais quitter "Ajouter des Classes CSS" et "HTML5 Cale/IEPP", car les deux sont très légers, et sont utiles.

    OriginalL'auteur Rich Bradshaw