向不同的属性添加过渡

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更易于重用。

Answer 2

你可以使用一个选择器，它是两个类的组合，用逗号分隔两个过渡，像这样:

.class1.class2 { 
    -webkit-transition: background-color 0.4s, top 1s; /* Safari 4.0 */
    -moz-transition: background-color 0.4s, top 1s; /* FF 5.0 */
    -o-transition: background-color 0.4s, top 1s; /* Opera 12 */
    transition: background-color 0.4s, top 1s; /* Modern browsers */
}

Answer 3

在CSS中，当有两个冲突的属性时，最后一个将总是覆盖第一个(除非您添加"!"重要"，在我看来，这有点懒惰)。

你要考虑重新考虑CSS流的方式。你希望你的元素总是拥有的最重要的样式应该在第一个块中…后续的样式应该以添加的方式应用。