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

适用于Firefox

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

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

addRule , removeRule

LIVE DEMO FOR CHROME AND FIREFOX

堆栈CSS转换使用多个类而不覆盖

1 个答案: