在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
类过渡属性的定义,它会工作得很好。我只是想添加一个额外的过渡属性到现有的颜色过渡。
2条答案
按热度按时间wwwo4jvm1#
这是不可能的。
但是,在这种情况下,我的解决方法是分解短语法,只重写需要更改的属性,这样就可以保留其余的属性。
在这种情况下:
注意:如果. transition-b在. transition-a之后声明,则可以省略! important NB2:这对于背景图像效果很好。
k4ymrczo2#
如果转场具有相同的持续时间、延迟和缓动,则始终可以使用
transition-property: all
:表面上看,使用
all
会对性能造成影响(例如,请参见this answer),但我从未注意到这一点。