2

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;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
bodine
  • 1,763
  • 4
  • 19
  • 28
  • Not sure what you are trying to do exactly, but the browser specific CSS property prefixes are: `-webkit-`,`-moz-`,`-ms-`,`-o-`. – Strelok Dec 06 '11 at 00:23
  • 1
    @Strelok in JavaScript, variables cannot have a dash so they were made `Webkit`, `Moz`, `ms`, `O`. – Will Dec 06 '11 at 00:28
  • @WilliamVanRensselaer, yes that is correct, but what he is doing is returning strings as *prefixes*. I guess it's impossible to tell what he's going to use them for as he didn't provide any code around it. It's not even a real question, what the OP is asking. – Strelok Dec 06 '11 at 00:36
  • 1
    @Strelok He probably intends to use the prefix string to set transitions through JavaScript... `elem.style[ pref + "Transition" ] = "transition settings";` – Will Dec 06 '11 at 00:49
  • @WilliamVanRensselaer It is my intention to set the element style this way. I was having a problem using the `style` property as opposed to grabbing the `getComputedStyle`, but I'm not seeing it anymore. For looking up keys in an elements `CSSStyleDeclaration` I suppose the two methods are functionally equivalent. That was part of my OP question, as well as whether my 'tricky' ternary operator, which in retrospect looks just messy, held any water. Thanks, I think your answer does the job fine. – bodine Dec 06 '11 at 17:11

2 Answers2

1

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.

Community
  • 1
  • 1
vsync
  • 118,978
  • 58
  • 307
  • 400
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" );
Will
  • 19,661
  • 7
  • 47
  • 48
  • I don't want IE to get any of the transition effects. I basically want to write one list of transitions with `style` settings peppered in as well. When the list runs, IE should render the element at the end point of all the transitions (e.g. after it's done moving, fading, etc). I don't want **ANY** movement in IE without transition support, but It would stay future proof for IE10's `msTransition` – bodine Dec 06 '11 at 17:19
  • Maybe this `setTransition` function should should expect another parameter which would define the properties to be transitioned, and possibly a third `callback` parameter to run when the browsers fire their myriad of `transitionend` events. Thanks for the inspiration, I'll see what I can work up. – bodine Dec 06 '11 at 17:24
  • Also, I'm a bit confused about your `setTransition`... why is it necessary to wrap it in an `IIFE`? – bodine Dec 06 '11 at 17:29
  • The `getTransitionPrefix` method will return the prefix if the browser requires it, an empty string if the browser supports transition but does not require a prefix, and false if there is no support. Then `setTranision` will check (in the if statement) if there is support for transitions, and if so, set the transition. Therefore, in the case of IE6-9, no transition will be set as there is no support. – Will Dec 06 '11 at 21:43