将类的过渡属性添加到现有过渡属性中

问题描述

在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>

将覆盖过渡-a，而不是在现有的过渡定义中添加其他属性。

如果可以组合诸如mixins之类的不同类而产生诸如这样的属性，那就太好了

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

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

编辑：更多详细信息

我当前使用Bootstrap的SASS源，并想在Bootstraps .badge类上应用其他过渡。我还有一个包含以下内容的附加类.fade：

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

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

解决方法

不可能。

但是，在这种情况下，我的解决方法是破坏简短的语法，仅重写需要更改的属性，以便保留其余内容。

在这种情况下：

.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：这非常适合背景图片。