¿Cuáles son los problemas para obtener el prefijo de proveedores para las transiciones CSS usando JavaScript?

Question

No solo me gustaría detectar el soporte de transición, sino que establezca el prefijo correcto con una llamada de función. ¿Habría algún problema claro para hacerlo de esta manera?

function getTransitionPrefix() {
var el = document.getElementsByTagName("body")[0],
cssDec = (typeof window.getComputedStyle === "undefined") ?  {} : window.getComputedStyle(el,null),
transition = typeof cssDec.WebkitTransition !== "undefined" ? "Webkit" : 
typeof cssDec.MozTransition !== "undefined"  ? "Moz":
typeof cssDec.msTransition !== "undefined" ? "ms" :
typeof cssDec.OTransition !== "undefined" ? "O" : false;
return transition;
}

Answer 1

No veo nada malo, pero probablemente lo haría de esta manera:

function getTransitionPrefix() {
    var el = document.createElement( "div" ),
        prefixes = ["Webkit", "Moz", "O", "ms"];
    for ( var i = 0; i < prefixes.length; i++ ) {
        if ( prefixes[i] + "Transition" in el.style ) {
            return prefixes[i];
        }
    }
    return "transition" in el.style ? "" : false;
}

Luego establece la transición:

var setTransition = (function() {
    var pref = getTransitionPrefix();
    return function( elem, trans ) {
        if ( pref !== false ) {
            var s = pref === "" ? "transition" : pref + "Transition";
            elem.style[s] = trans;
        }
    };
})();

setTransition( element, "transition settings" );

Answer 2

Por favor vea mi respuesta completa aquí: https://stackoverflow.com/a/13081497/104380

Te sugiero que uses este método:

function getPrefixed(prop){
    var i, s = document.body.style, v = ['ms','O','Moz','Webkit'];
    if( s[prop] == '' ) return prop;
    prop = prop[0].toUpperCase() + prop.slice(1);
    for( i = v.length; i--; )
        if( s[v[i] + prop] == '' )
            return (v[i] + prop);
}

var transition = getPrefixed("transition");

Esto se asegurará de que el transition La variable apuntará a la sintaxis correcta.