如何分類CSS樣式的每個逗號分隔值以便可以累積它們？

Question

例如，

我要讓相同的元素：

<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風格可以應用。

我該如何解決這個問題，或者不鼓勵由設計？

Answer 1

感謝您的評論，Marvin。不幸的是，似乎CSS 還有還有很長的路要走。我希望有一天我們可以體驗Web風格的演變。

幾年前，這個已經被（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}