如何解决将类的过渡属性添加到现有过渡属性中
在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:这非常适合背景图片。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。