css 按类将过渡属性添加到现有过渡属性

niwlg2el  于 2023-02-10  发布在  其他
关注(0)|答案(2)|浏览(119)

在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,而不是向现有转场定义添加附加属性。
如果可以组合不同的类(如mixin),从而生成类似于

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;

如果它不覆盖Bootstrap .badge类过渡属性的定义,它会工作得很好。我只是想添加一个额外的过渡属性到现有的颜色过渡。

wwwo4jvm

wwwo4jvm1#

这是不可能的。
但是,在这种情况下,我的解决方法是分解短语法,只重写需要更改的属性,这样就可以保留其余的属性。
在这种情况下:

.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:这对于背景图像效果很好。

k4ymrczo

k4ymrczo2#

如果转场具有相同的持续时间、延迟和缓动,则始终可以使用transition-property: all

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

.transition-b {
  transition-property: all;
}

表面上看,使用all会对性能造成影响(例如,请参见this answer),但我从未注意到这一点。

相关问题