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