如何结合多个"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

转换是在相同的元素上声明的，所以即使你使用不同的类来声明它们，转换属性也会被第二个转换声明覆盖。

你可以转换几个属性，如高度和不透明度，如果你在一个声明中声明它们，用逗号分隔，使用这种语法(查看w3.org的参考):

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>

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

使用CSS过渡- MDN指南