detección de soporte de transición css con modernizr

Voy a usar la transición css y un complemento jquery como respaldo para los navegadores que no lo admiten. Quiero usar modernizr para detectar el soporte de transición css. Es excesivo cargar toda la biblioteca para esto, solo quiero tomar la porción de código que necesito para detectar la transición css. en el download page de modernizr hay muchas opciones y extras que me confunden. Mi pregunta es ¿qué opciones debo seleccionar para detectar eficientemente la transición de CSS?detección de soporte de transición css con modernizr

enter image description here

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


<script type="text/javascript"> 
    if(!Modernizr.csstransitions) { 
    // Use jquery if CSS transitions are not supported 
    } 
</script>

Fuente

2011-08-07 NL500

Si quieres trabajar de forma dinámica con el apoyo de transición y CSS3 jQuery recurre luego verifique este [artículo] (http://hankchizljaw.co.uk/tutorials/dynamically-use-css3-transitions-with-jquery-and-modernizr-snippet/05/06/2012/) out. – HankChizlJaw

Transacciones CSS no existen, creo que busca transiciones CSS. Está en la parte inferior de la columna CSS3.

Fuente

2011-08-07 10:13:07 ZippyV

Tienes razón. Mi error. ¿Entonces solo necesito seleccionar transiciones de CSS e incluir el código generado en mi página? –

Sí, si las transiciones son lo único que necesita. – awesomesyntax

Simplemente marque la casilla de transiciones CSS. Automáticamente marcará unas casillas en la parte inferior derecha, dejaré "Agregar clases de CSS" y "HTML5 Shim/IEPP", ya que ambos son muy livianos y útiles.

Fuente

2011-08-07 10:21:09

Aquí está el código que necesita de la biblioteca de Modernizr. Es solo 1kb.

;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);

Por ejemplo, puede caer de nuevo con el siguiente código y servir jQuery animaciones alimentados a los navegadores que no soportan CSS3 transiciones:

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

Fuente

2011-12-05 18:41:03

detección de soporte de transición css con modernizr

Respuesta

Cuestiones relacionadas