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

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

笔记：

对于铬

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

对于火狐浏览器

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

对于 IE 来说 insertRule不起作用deleteRule，有这些：

addRule , removeRule

Chrome 和 Firefox 的现场演示