按类将转换属性添加到现有转换属性

Question

是否可以在 CSS3 中让一个类只向现有的过渡添加新的过渡属性，而不是替换旧的过渡定义？

例如：

.transition-a {
transition: opacity 0.3s ease-in;
}

.transition-b {
transition: color 0.3s ease-in !important;
}

<div class="transition-a transition-b">
</div>

将覆盖transition-a，而不是向现有的转换定义添加额外的属性。

如果可以组合不同的类（如 mixins）产生类似的属性，那就太好了

transition: color 0.3s ease-in, opacity 0.3 ease-in`

无需为这两个类的组合明确指定会迫使您重复自己的规则。

编辑：更多详情

我目前使用 Bootstrap 的 SASS 源，并希望在 Bootstrap .badge 类上应用额外的转换。我还有一个额外的课程 .fade 包含以下内容：

.custom-badge.fade {
transition: opacity 0.3s ease-in !important;

如果它不会覆盖 Bootstraps .badge 类转换属性的定义，它将正常工作。我只是想为现有的颜色过渡添加一个额外的过渡属性。

Answer 1

不可能。

但是，在这种情况下，我的解决方法是分解简短的语法并仅重写需要更改的属性，这样您就可以保留其余部分。

在这种情况下：

.transition-a {
  transition-property: opacity;
  transition-duration: .3s;
  transition-timing-function: ease-in;
}

.transition-b {
  transition-property: opacity, color;
}
  

注意：如果 .transition-b 在 .transition-a 之后声明，则可以省略 !important NB2：这适用于背景图像。