向其他属性添加过渡 [英] Adding transition to a different property

问题描述

我有一个具有两个类的元素：

I have an element with two classes:

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

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

问题是 class2 的过渡覆盖了 class1 。

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

I can't use .class2 {transition: all 1s} because the transition duration must be different.

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

I also don't want to duplicate the code from class1 to class2 because class2 can be applied to other elements as well.

有没有办法将过渡添加到元素而不覆盖现有过渡？

Is there a way to add transitions to an element without overwriting existing ones?

推荐答案

不幸的是，无法在CSS的另一个规则中扩展属性，无论是转换还是其他属性。
某些替代方法可能是：

Unfortunately it's not possible to "extend" a property in another rule in CSS, no matter if it's a transition or another property. Some alternatives may be:

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

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

The cons are that you have to create such rule for each of the relevant combinations. This also means code duplication.

表示html对象的方式，因此您无需扩展规则。在我的情况下是：

Find a proper way of representing the html objects so you won't need to extend the rules. In my case it's:

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

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

The cons are a bit more complicated html. On the other hand you avoid duplicate code, and make your css more reusable.

这篇关于向其他属性添加过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！