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 仍然还有很长的路要走。我希望有一天我们可以体验网络风格的演变。

几年前已经问过这个问题（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}

如何对CSS样式的每个逗号分隔值进行分类，以便可以累积它们？

1 个答案: