css - 将过渡添加到不同的属性

Question

我有一个包含两个类的元素:

<div class="class1 class2"></div>

.class1 {transition: background-color 0.4s;}
.class2 {transition: top 1s;}

问题是 class2 的转换覆盖了 class1 的转换。

我不能使用 .class2 {transition: all 1s} 因为过渡持续时间必须不同。

我也不想将代码从 class1 复制到 class2 因为 class2 也可以应用于其他元素。

有没有办法在不覆盖现有元素的情况下向元素添加过渡？

Answer 1

不幸的是，不可能在 CSS 的另一个规则中“扩展”属性，无论它是 transition 还是其他属性。一些替代方案可能是:

为类的组合创建规则

.class1.class2 {transition:background-color 0.4s, top 1s;}

缺点是您必须为每个相关组合创建这样的规则。这也意味着代码重复。

更改 html 以消除组合规则的需要

找到一种正确的方式来表示 html 对象，这样您就不需要扩展规则。在我的例子中是:

<div class="class2">
  <div class="class1">
</div>

缺点是html有点复杂。另一方面，您可以避免重复代码，并使您的 css 更具可重用性。