Stack CSS Transitions using multiple classes without overriding - css

Question

I want to use multiple classes to optionally add transitions. Instead of stacking, the previous is getting overridden.
.container { transition: margin .2s; }
.container.t-padding { transition: padding .2s; }
The problem: Property is overridden rather than stacking
http://jsfiddle.net/yz2J8/2/ (The problem)
My temporary solution: Add the previous transition to the rule
.container { transition: margin .2s; }
.container.t-padding { transition: padding .2s, margin .2s; }
http://jsfiddle.net/ZfQcp/6/ (My temporary solution)
What's a better solution??
How can I avoid having to create tons of rules to combine these?

Answer 1

JavaScript could be a cleaner solution as you only need to have 1 CSS rule (the original rule).
If you know the position of you're rule you can do the following.
//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;
Now originalRule will contain this:
.container{
...
transition: margin .2s;
...
}
And originalHover will contain this:
.container:hover{
...
margin: 10px 0;
...
}
to simply add another transition effect, you can do the following.
document.styleSheets[0].cssRules[3].style.transitionProperty += ",background-color";
document.styleSheets[0].cssRules[4].style.transitionDuration += ",1s";
At this stage, both transitions will take effect.
If you want to only have the original transition, you can either add it manually or simply...
//Delete the Rule
document.styleSheets[0].deleteRule(3);
//Add the Original Rule Back Again
document.styleSheets[0].insertRule(originalRule,3);
If you do so, only the original transition (margin) will take effect, don't forget to also replace the originalHover rule to remove any other effects on hover.
Note:
For Chrome
document.styleSheets[0].cssRules[3].style.webkitTransitionProperty
For Firefox
document.styleSheets[0].cssRules[3].style.mozTransitionProperty
For IE
insertRule and deleteRule do not work, there's these ones instead:
addRule , removeRule
LIVE DEMO FOR CHROME AND FIREFOX