时间戳

首页 > 解决方案 > 按类将转换属性添加到现有转换属性

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

问题描述

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

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

编辑：更多细节

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

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

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

标签： htmlcsstwitter-bootstrapsasscss-transitions

解决方案

这是不可能的。

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

在这种情况下：

.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：这对背景图像非常有效。

推荐阅读