使用多个类堆叠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可能是一个更干净的解决方案，因为你只需要一个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

Firefox

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

例如

insertRule和deleteRule不工作，有这些代替:

addRule , removeRule

CHROME和FIREFOX的实时演示