Stos Przejścia CSS stosu przy użyciu wielu klas bez przesłonięcia

Question

Chcę użyć wielu klas, aby opcjonalnie dodać przejścia. Zamiast układania w stosy poprzednia jest nadpisywana.

.container { transition: margin .2s; } 
.container.t-padding { transition: padding .2s; } 

Problem: Nieruchomość jest przesłonięta zamiast układania

http://jsfiddle.net/yz2J8/2/ (Problem)

Moje rozwiązanie tymczasowe: Dodaj poprzedniego przejścia do rządów

.container { transition: margin .2s; } 
.container.t-padding { transition: padding .2s, margin .2s; } 

http://jsfiddle.net/ZfQcp/6/ (Moja sytuacja rozwiązanie ary)

Jakie jest lepsze rozwiązanie?

Jak mogę uniknąć tworzenia mnóstwa reguł, aby je połączyć?

Answer 1

JavaScript może być czystszym rozwiązaniem, ponieważ potrzebujesz tylko 1 reguły CSS (oryginalnej reguły).

Jeśli znasz pozycję, w której się znajdujesz, możesz wykonać następujące czynności.

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

Teraz originalRule będzie zawierać to:

.container{ 
    ... 
    transition: margin .2s; 
    ... 
} 

I originalHover będzie zawierać to:

.container:hover{ 
    ... 
    margin: 10px 0; 
    ... 
} 

po prostu dodać inny efekt przejścia, można wykonać następujące czynności.

Na tym etapie obie zmiany zostaną uwzględnione.

Jeśli chcesz tylko oryginalne przejście, można go dodać ręcznie lub po prostu ...

//Delete the Rule 

document.styleSheets[0].deleteRule(3); 

//Add the Original Rule Back Again 

document.styleSheets[0].insertRule(originalRule,3); 

Jeśli to zrobisz, tylko oryginalne przejście (margines) wejdą w życie, don” t zapomnij również zastąpić regułę originalHover, aby usunąć wszelkie inne efekty po najechaniu myszą.

Uwaga:

Dla Chrome

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

Dla Firefox

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

dla IE insertRule i deleteRule nie działają, nie te z nich zamiast:

addRule , removeRule 

LIVE DEMO FOR CHROME AND FIREFOX