What are the issues with getting the vendor prefix for CSS Transitions using javascript?

Question

I'd like to not only detect transition support, but set the correct prefix with one function call. Would there be any clear issues with doing it this way?

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

I don't see anything wrong, but I would probably do it this way:

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

Then setting the transition:

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

Please see my complete answer here: https://stackoverflow.com/a/13081497/104380

I suggest you use this method:

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

This will make sure the transition variable will point to the correct syntax.