Какие проблемы возникают при получении префикса поставщика для CSS-переходов с использованием javascript?

Question

Я хотел бы не только определить поддержку перехода, но и установить правильный префикс одним вызовом функции. Будут ли какие-то явные проблемы с этим?

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

Пожалуйста, смотрите мой полный ответ здесь : https://stackoverflow.com/a/13081497/104380

Я предлагаю вам использовать этот метод:

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

Это гарантирует, что переменная transition будет указывать на правильный синтаксис.

Answer 2

Я не вижу ничего плохого, но я, вероятно, сделал бы это следующим образом:

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

Затем установите переход:

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