使用多个类堆叠 CSS 过渡而不覆盖

Question

我想使用多个类来选择性地添加过渡。之前的不是堆叠，而是被覆盖。

.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/（我的临时解决方案）

什么是更好的解决方案？

如何避免创建大量规则来组合这些规则？

Answer 1

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

如果你这样做，只有原来的过渡（边距）会生效，不要忘记也替换 originalHover 规则以删除任何其他悬停效果。

注意：

对于 Chrome

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

对于火狐

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

对于 IE insertRule 和 deleteRule 不起作用，取而代之的是这些：

addRule , removeRule

LIVE DEMO FOR CHROME AND FIREFOX