如何对 CSS 样式的每个逗号分隔值进行分类以便累积？答案

【问题标题】：How can I classify each comma-separated value of CSS styles so that they can be accumulated?如何对 CSS 样式的每个逗号分隔值进行分类以便累积？
【发布时间】：2017-08-15 12:30:18
【问题描述】：

例如，

我想做这样的元素：

<div style="
    transition: opacity 250ms linear, background-color 250ms linear;
    "></div>

<span style="
    transition: opacity 250ms linear, color 250ms linear;
    "></span>

和 分类样式以使它们（CSS 类）易于重用：

.smooth-opacity-change {transition: opacity 250ms linear;}
.smooth-color-change {transition: color 250ms linear;}
.smooth-background-color-change {transition: background-color 250ms linear;}

;那我就可以写了：

<div class="smooth-opacity-change smooth-background-image-change"></div>

<span class="smooth-opacity-change smooth-color-change"></span>

但它们是独一无二的； transition 样式可以有多个值，但只能应用一个 transition 样式。

我该如何解决这个问题，或者它是有意设计的？

【问题讨论】：

几年前已经有人问过这个问题（Adding transition to a different property，Stack CSS Transitions using multiple classes without overriding），恐怕除了writing down all possible combinations of transition-properties之外，没有其他解决方案了。可以通过使用预处理器将其简化为几行，但最终的 CSS 将是相同的。

标签： css

【解决方案1】：

感谢您的评论，Marvin。不幸的是，CSS 似乎还有很长的路要走。我希望有一天我们可以体验网络样式的演变。

几年前已经有人问过这个问题 (Adding transition to a different property)，恐怕除了写下所有可能的转换属性组合之外，没有其他解决方案了。 使用预处理器可以将其简化为几行，但最终的 CSS 将是相同的。 -- Marvin

/* Writing down all 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}

【讨论】：