Detecta las transiciones css usando javascript (y sin modernizr)?

¿Cómo detectaría que un navegador admite transiciones css usando javascript (y sin usar modernizr)?

Quizás algo como esto. Básicamente, solo busca ver si se ha definido la propiedad de transition CSS:

 function supportsTransitions() { var b = document.body || document.documentElement, s = b.style, p = 'transition'; if (typeof s[p] == 'string') { return true; } // Tests for vendor specific prop var v = ['Moz', 'webkit', 'Webkit', 'Khtml', 'O', 'ms']; p = p.charAt(0).toUpperCase() + p.substr(1); for (var i=0; i 

Adaptado de esta esencia Todo el crédito va allí.

3 formas de hacerlo:

 var supportsTransitions = (function() { var s = document.createElement('p').style, // 's' for style. better to create an element if body yet to exist v = ['ms','O','Moz','Webkit']; // 'v' for vendor if( s['transition'] == '' ) return true; // check first for prefeixed-free support while( v.length ) // now go over the list of vendor prefixes and check support until one is found if( v.pop() + 'Transition' in s ) return true; return false; })(); console.log(supportsTransitions) // 'true' on modern browsers 

O:

 var s = document.createElement('p').style, supportsTransitions = 'transition' in s || 'WebkitTransition' in s || 'MozTransition' in s || 'msTransition' in s || 'OTransition' in s; console.log(supportsTransitions); // 'true' on modren browsers 

Si realmente desea usar el prefijo correcto, use esto:

 function getPrefixed(prop){ var i, s = document.createElement('p').style, v = ['ms','O','Moz','Webkit']; if( s[prop] == '' ) return prop; prop = prop.charAt(0).toUpperCase() + prop.slice(1); for( i = v.length; i--; ) if( s[v[i] + prop] == '' ) return (v[i] + prop); } // get the correct vendor prefixed property transition = getPrefixed('transition'); // usage example elment.style[transition] = '1s'; 

A partir de 2015, este one-liner debería hacer el trato (IE 10+, Chrome 1+, Safari 3.2+, FF 4+ y Opera 12 +): –

 var transitionsSupported = ('transition' in document.documentElement.style) || ('WebkitTransition' in document.documentElement.style); 

Aquí la forma en que usé:

  var style = document.documentElement.style; if ( style.webkitTransition !== undefined || style.MozTransition !== undefined || style.OTransition !== undefined || style.MsTransition !== undefined || style.transition !== undefined ) { // Support CSS3 transititon } 

También puede usar el siguiente enfoque (tipo de función de una línea):

 var features; (function(s, features) { features.transitions = 'transition' in s || 'webkitTransition' in s || 'MozTransition' in s || 'msTransition' in s || 'OTransition' in s; })(document.createElement('div').style, features || (features = {})); console.log(features.transitions);