12

我想使用多个类来选择性地添加转换。而不是堆叠，前一个被覆盖。

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

有什么更好的解决方案？？

我怎样才能避免必须创建大量规则来组合这些规则？

4

1 回答 1

2

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

如果你这样做了，只有原来的过渡（margin）会生效，别忘了也替换 originalHover 规则来移除任何其他的悬停效果。

笔记：

对于铬

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

对于火狐

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

对于 IE insertRule并且deleteRule不工作，有这些代替：

addRule , removeRule

Chrome 和 Firefox 的现场演示

于 2013-06-03T02:39:40.160 回答