使用javascript獲取CSS轉換的供應商前綴時遇到什麼問題？

我想不僅檢測轉換支持，但設置一個函數調用正確的前綴。這樣做會有什麼明顯的問題嗎？使用javascript獲取CSS轉換的供應商前綴時遇到什麼問題？

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

來源

2011-12-05 bodine

不確定你想要做什麼，但瀏覽器特定的CSS屬性前綴是：'-webkit -'，'-moz-'，'-ms-'，'-o-'。 – Strelok

@Strelok在JavaScript中，變量不能有破折號，因此它們被創建爲'Webkit'，'Moz'，'ms'，'O'。 – Will

@WilliamVanRensselaer，是的，這是正確的，但他正在做的是返回字符串*前綴*。我猜這是不可能的，因爲他沒有提供任何代碼。這甚至不是一個真正的問題，OP所要求的是什麼。 – Strelok

我看不出有什麼錯，但我可能會做這種方式：

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

來源

2011-12-06 00:17:43 Will

我不希望IE獲得任何轉換效果。我基本上想寫一個轉換列表，其中還包含'style'設置。當列表運行時，IE應該在所有轉換的終點處渲染元素（例如，在完成移動，淡入淡出等之後）。我不希望在沒有轉換支持的情況下在IE中使用** ANY **動作，但它將爲IE10的'msTransition'保留未來的證明。 – bodine

也許這個'setTransition'函數應該期望另一個參數來定義要轉換的屬性，並且可能還有第三個'callback'參數在瀏覽器觸發無數'transitionend'事件時運行。感謝您的靈感，我會看看我能做些什麼。 – bodine

另外，我對你的'setTransition'有點困惑......爲什麼需要將它包裝在'IIFE'中？ – bodine

請在這裏看到我的完整的答案：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變量指向正確的語法。

來源

2012-12-03 06:16:56 vsync

使用javascript獲取CSS轉換的供應商前綴時遇到什麼問題？

回答

相關問題