使用 javascript 获取 CSS 转换的供应商前缀有什么问题？答案

【问题标题】：What are the issues with getting the vendor prefix for CSS Transitions using javascript?使用 javascript 获取 CSS 转换的供应商前缀有什么问题？
【发布时间】：2012-01-13 16:04:31
【问题描述】：

我不仅想检测过渡支持，还想通过一个函数调用设置正确的前缀。这样做会有什么明显的问题吗？

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

【问题讨论】：

不确定您到底想做什么，但浏览器特定的 CSS 属性前缀是：-webkit-,-moz-,-ms-,-o-。
@Strelok 在 JavaScript 中，变量不能有破折号，所以它们被设为 Webkit、Moz、ms、O。
@WilliamVanRensselaer，是的，这是正确的，但他正在做的是将字符串作为前缀返回。我想不可能知道他将使用它们做什么，因为他没有提供任何代码。 OP 在问什么，这甚至不是一个真正的问题。
@Strelok 他可能打算通过 JavaScript 使用前缀字符串来设置转换...elem.style[ pref + "Transition" ] = "transition settings";
@WilliamVanRensselaer 我打算以这种方式设置元素样式。我在使用style 属性时遇到了问题，而不是使用getComputedStyle，但我不再看到它了。为了在元素CSSStyleDeclaration 中查找键，我想这两种方法在功能上是等效的。那是我的 OP 问题的一部分，以及我的“棘手”三元运算符（回想起来看起来很乱）是否站得住脚。谢谢，我认为你的回答做得很好。

标签： javascript css cross-browser css-transitions

【解决方案1】：

我看不出有什么问题，但我可能会这样做：

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

【讨论】：

我不希望 IE 获得任何过渡效果。我基本上想写一份带有style 设置的转换列表。当列表运行时，IE 应该在所有转换的终点渲染元素（例如，在它完成移动、淡化等之后）。我不希望在没有过渡支持的情况下在 IE 中进行 ANY 运动，但它会为 IE10 的msTransition 提供未来证明
也许这个setTransition 函数应该期望另一个参数来定义要转换的属性，并且可能在浏览器触发无数transitionend 事件时运行第三个callback 参数。感谢您的启发，我会看看我能做些什么。
另外，我对你的setTransition 有点困惑……为什么要把它包装在IIFE 中？
getTransitionPrefix 方法将在浏览器需要时返回前缀，如果浏览器支持过渡但不需要前缀则返回空字符串，如果不支持则返回 false。然后setTranision 将检查（在 if 语句中）是否支持转换，如果支持，则设置转换。因此，在 IE6-9 的情况下，由于没有支持，所以不会设置过渡。

【解决方案2】：

请在此处查看我的完整答案：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 变量将指向正确的语法。

【讨论】：