如何组合多个“过渡”规则？

Posted 2023-03-06

【中文标题】如何组合多个“过渡”规则？

【英文标题】：How to combine multiple "transition" rules?

【发布时间】：2014-09-01 20:14:27

【问题描述】：

我希望有 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>

如何在同一个元素上应用多个过渡规则？

【问题讨论】：

用户transition: all 1s

你找到解决办法了吗？

【参考方案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>

【参考方案2】：

您可以使用all 使所有正在更改的属性都具有过渡效果，或者如果您只想选择（但多个）属性具有过渡效果，则可以使用逗号分隔值。

.active_only 
    opacity: 0;
    -webkit-transition: height 1s, opacity 1s;
    -moz-transition: height 1s, opacity 1s;
    transition: height 1s, opacity 1s;

或

.active_only 
    opacity: 0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;

.active_only 
  opacity: 0;
  -webkit-transition: height 1s, opacity 1s;
  -moz-transition: height 1s, opacity 1s;
  transition: height 1s, opacity 1s;

.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>

Using CSS Transitions - MDN Guide