将转换添加到其他属性

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另一个属性，都不可能在CSS的另一个规则中“扩展”一个属性。一些替代方法可能是：

为类的组合创建规则

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

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

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

找到一种表示html对象的正确方法，这样就无需扩展规则。就我而言：

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

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