Chuyển tiếp CSS ngăn xếp bằng nhiều lớp mà không ghi đè

Question

Tôi muốn sử dụng nhiều lớp để tùy chọn thêm chuyển tiếp. Thay vì xếp chồng, trước đó là nhận được ghi đè.

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

Vấn đề: tài sản được ghi đè chứ không phải xếp chồng

http://jsfiddle.net/yz2J8/2/ (Vấn đề)

giải pháp tạm thời của tôi: Thêm sự chuyển trước cho quy tắc

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

http://jsfiddle.net/ZfQcp/6/ (Thời gian của tôi giải pháp ary)

Giải pháp tốt hơn là gì ??

Làm cách nào để tránh phải tạo hàng tấn quy tắc để kết hợp các quy tắc này?

Answer 1

JavaScript có thể là giải pháp sạch hơn vì bạn chỉ cần có 1 quy tắc CSS (quy tắc ban đầu).

Nếu bạn biết vị trí của quy tắc, bạn có thể thực hiện các thao tác sau.

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

Bây giờ originalRule sẽ chứa này:

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

Và originalHover sẽ chứa này:

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

chỉ đơn giản là thêm một hiệu ứng chuyển, bạn có thể làm như sau.

document.styleSheets[0].cssRules[3].style.transitionProperty += ",background-color"; 
document.styleSheets[0].cssRules[4].style.transitionDuration += ",1s"; 

Ở giai đoạn này, cả hai quá trình chuyển đổi sẽ có hiệu lực.

Nếu bạn chỉ muốn có sự chuyển đổi ban đầu, bạn có thể thêm nó bằng tay hoặc đơn giản là ...

//Delete the Rule 

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

//Add the Original Rule Back Again 

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

Nếu bạn làm như vậy, chỉ có sự chuyển đổi ban đầu (margin) sẽ có hiệu lực, don' Tôi cũng quên thay thế quy tắc originalHover để xóa bất kỳ hiệu ứng nào khác trên di chuột.

Lưu ý:

Đối với Chrome

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

Đối với Firefox

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

Đối với IE insertRule và deleteRule không làm việc, có những cái thay vì:

addRule , removeRule 

LIVE DEMO FOR CHROME AND FIREFOX