使用多個類而不重寫堆棧CSS轉換

我想使用多個類來選擇性地添加轉換。而不是堆疊，以前被覆蓋。使用多個類而不重寫堆棧CSS轉換

.container { transition: margin .2s; } 
.container.t-padding { transition: padding .2s; }

問題：房產被覆蓋，而不是堆積

http://jsfiddle.net/yz2J8/2/（問題）

我的臨時解決辦法：以前的過渡添加到規則

.container { transition: margin .2s; } 
.container.t-padding { transition: padding .2s, margin .2s; }

http://jsfiddle.net/ZfQcp/6/（My tempor ary solution）

什麼是更好的解決方案？

如何避免必須創建大量規則來組合這些規則？

來源

2013-06-02 Mike Lewis

我相信你的臨時解決方案將是相當永久的。 ';''這就是CSS屬性和特異性的用意。除非你想要醜陋的黑客（例如嵌套元素和對每個元素進行轉換），或者使用一些預處理器（儘管我不知道與此相關的任何原生mixin），最終它會歸結爲你所擁有的。 –

JavaScript可能是一個更乾淨的解決方案，因爲您只需要有1個CSS規則（原始規則）。

如果你知道你的位置是規則，你可以做到以下幾點。

//First Save The Original Rule 

var originalRule = document.styleSheets[0].cssRules[3].cssText; 

//Save also the original Hover Rule 

var originalHover = document.styleSheets[0].cssRules[4].cssText;

現在originalRule將包含此：

.container{ 
    ... 
    transition: margin .2s; 
    ... 
}

而且originalHover將包含此：

.container:hover{ 
    ... 
    margin: 10px 0; 
    ... 
}

只需添加另一個過渡效果，你可以做到以下幾點。

document.styleSheets[0].cssRules[3].style.transitionProperty += ",background-color"; 
document.styleSheets[0].cssRules[4].style.transitionDuration += ",1s";

在這個階段，兩個轉換都會生效。

如果你想只有原來的過渡，您可以手動或乾脆將其添加...

//Delete the Rule 

document.styleSheets[0].deleteRule(3); 

//Add the Original Rule Back Again 

document.styleSheets[0].insertRule(originalRule,3);

如果這樣做，只有原來的過渡（保證金）將生效，不要」 t忘記還要替換原來的移動規則，以消除懸停時的其他影響。

注：

使用Chrome

document.styleSheets[0].cssRules[3].style.webkitTransitionProperty

對於Firefox

document.styleSheets[0].cssRules[3].style.mozTransitionProperty

對於IE insertRule和deleteRule不工作，有這些的，而不是：

addRule , removeRule

LIVE DEMO FOR CHROME AND FIREFOX

來源

2013-06-03 02:39:40

哇 - 我只是創建一些冗餘的CSS類：P動態CSS規則是非常甜，雖然，我一直在意味着檢查出來。感謝徹底的迴應 –

使用多個類而不重寫堆棧CSS轉換

回答

相關問題