Question

我想拥有CSS轻量级类，每个类都意味着一件事。所以我想有一个类说当鼠标悬停在它上面时项目越来越高，另一个表示如果父项不活动则该项目应该变得不可见。问题是每个方面都应该是动画的，所以我在头等舱中定义了transition: height 1s，在另一个中定义了transition: opacity 2s。

以下是我尝试的简化版http://jsfiddle.net/4WPrU/。这似乎做了一些与我预期完全不同的事情：规则不合并，而只是互相覆盖。

＆＃13;

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

＆＃13;

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

＆＃13;

周围有优雅的方式吗？

修改已将1s的{{1}}更改为opacity，以便更明显地表明我的目的是拥有完全独立的规则，而这些规则无法使用2s进行合并。

Answer 1

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

如果使用此语法（check w3.org for reference）仅声明转换一次，则可以转换高度和不透明度：

transition: opacity 1s, height 1s;

您的CSS可能如下所示：

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

<强> DEMO

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

Using CSS Transitions - MDN Guide

有没有办法结合多个“过渡”规则？

2 个答案: