How can I classify each comma-separated value of CSS styles so that they can be accumulated? -
for example,
i want make elements like:
<div style=" transition: opacity 250ms linear, background-color 250ms linear; "></div> <span style=" transition: opacity 250ms linear, color 250ms linear; "></span>
, , classify styles make them(css classes) easy reuse:
.smooth-opacity-change {transition: opacity 250ms linear;} .smooth-color-change {transition: color 250ms linear;} .smooth-background-color-change {transition: background-color 250ms linear;}
; write it:
<div class="smooth-opacity-change smooth-background-image-change"></div> <span class="smooth-opacity-change smooth-color-change"></span>
but they're exclusive; transition
style can have multiple values, 1 transition
style can applied.
how can solve problem, or discouraged by design?
thank comment, marvin. unfortunately, seems css still have long way go. wish someday experience evolution of web styling.
some years ago has been asked (adding transition different property) , i'm afraid there not yet solution writing down possible combinations of transition-properties. simplified few lines using pre-processor the css same in end. -- marvin
/* writing down possible combinations of transition-properties */ .smooth-transition {transition-duration: 250ms; transition-timing-function: linear} .opacity-transition {transition-property: opacity} .background-color-transition {transition-property: background-color} .opacity-transition.background-color-transition {transition-property: opacity, background-color}
Comments
Post a Comment