css - 如何组合多个 "transition"规则？

Question

我想要 CSS 轻量级类，每个类都意味着一件事。所以我想要一个类，它说当鼠标悬停在一个元素上时它会变得更高，而另一个类说如果父级不活动，该元素应该变得不可见。问题是每个方面都应该是动画的，所以我在第一类中定义了 transition: height 1s，在另一个类中定义了 transition: opacity 2s。

这是我尝试的简化版本，这似乎做了一些与我预期完全不同的事情:规则不合并，而只是相互覆盖。

.active_only {
  opacity: 0;
  transition: opacity 1s;
}
.activator:hover .active_only {
  opacity: 1;
}
.elastic {
  height: 20px;
  transition: height 2s;
}
.elastic:hover {
  height: 40px;
}
li {
  border: 1px solid red;
}

<div class="activator">
  Here's a magic list
  <ul>
    <li class="elastic active_only">item one
      <li class="elastic active_only">item two
  </ul>
</div>

如何在同一元素上应用多个转换规则？

Answer 1

过渡是在相同的元素上声明的，因此即使您使用不同的类来声明它们，过渡属性也会被第二个过渡声明覆盖。

如果您使用以下语法 (check w3.org for reference) 在以逗号分隔的一个声明中声明它们，则可以转换多个属性:

transition: opacity 1s, height 2s;

您的代码应如下所示:

.active_only {
    opacity:0;
    transition:opacity 1s, height 2s;
}
.activator:hover .active_only {
    opacity:1;
}
.elastic {
    height:20px;
}
.elastic:hover {
    height:40px;
}
li {
    border:1px solid red;
}

<div class="activator">Here's a magic list
    <ul>
        <li class="elastic active_only">item one</li>
        <li class="elastic active_only">item two</li>
    </ul>
</div>