添加 `animation` 声明会弄乱 z-indexes，有点像

Question

使用 Bootstrap 的原生类，我有一个 .list-group-item 元素列表，其中有一些可点击的选项，显示为 .dropdown-menu 中的下拉菜单.默认情况下这工作正常，即使一个 .list-group-item 元素的下拉列表超过它下面的元素。

然后我添加的是 animation 声明，它通过使用从 opacity:0 到 opacity:1 的 @keyframes 动画在 .list-group-item 中淡出].作为其中的 side-effect，每个 .list-group-item 元素都在视觉上覆盖了前一个下拉菜单。

（实际上不涉及任何 z-index 声明，我只是在标题中使用该术语来说明问题的表现形式）

我想知道对于这个溢出问题是否有某种解决方法可以让我为元素保留 fade-in 动画？

可以在下面的 fiddle 中看到一个示例（没有 javascript 涉及或包含在那里，因为它不是必需的，所以两个下拉列表都在 HTML代码说明情况):

https://jsfiddle.net/o8ysz4qp/2/

HTML:

<div class="list-group-item fade-in">
  <div class="pull-right dropdown open">
    <button class="btn btn-primary">
      &darr;
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <p>Lorem ipsum dolor sit amet</p>
</div>

<div class="list-group-item fade-in">
  <div class="pull-right dropdown open">
    <button class="btn btn-primary">
      &darr;
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <p>Lorem ipsum dolor sit amet</p>
</div>

CSS:

.fade-in {
  opacity: 0; 
  animation:fade-in .5s ease; 
  animation-fill-mode: forwards;
  animation-delay:1s;
}
@keyframes fade-in {
  from { opacity:0; }
  to { opacity:1; }
}

Answer 1

问题在于，当不透明度不是 1 时，它会创建一个新的堆叠上下文（参见 The stacking context - CSS | MDN）

一个解决方案是添加一个z-index（因为它在不透明度变化后变得可用）并反转它们的值（最后一个具有最低的z-index等）

类似（假设他们是兄弟姐妹）

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.list-group-item:nth-last-child(1){z-index:1}
.list-group-item:nth-last-child(2){z-index:2}
.list-group-item:nth-last-child(3){z-index:3}
.list-group-item:nth-last-child(4){z-index:4}
.list-group-item:nth-last-child(5){z-index:5}
.list-group-item:nth-last-child(6){z-index:6}
.list-group-item:nth-last-child(7){z-index:7}

.fade-in {
  opacity: 0; 
  animation:fade-in .5s ease; 
  animation-fill-mode: forwards;
  animation-delay:1s;
}
@keyframes fade-in {
  from { opacity:0; }
  to { opacity:1; }
}

<div class="list-group-item fade-in">
  <div class="pull-right dropdown open">
    <button class="btn btn-primary">
      &darr;
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
    </ul>
  </div>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
</div>
<div class="list-group-item fade-in">
  <div class="pull-right dropdown open">
    <button class="btn btn-primary">
      &darr;
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
    </ul>
  </div>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
</div>

Answer 2

正如 Gaby 所解释的，动画 opacity 建立了一个堆叠上下文。

因此，与其在每个 .list-group-item 上设置不透明度动画，不如将它们全部放在一个容器中，然后在其中设置 opacity 动画。

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
body {
  opacity: 0; 
  animation: fade-in 2s ease; 
  animation-fill-mode: forwards;
}
@keyframes fade-in {
  from { opacity:0; }
  to { opacity:1; }
}

<div class="list-group-item fade-in">
  <div class="pull-right dropdown open">
    <button class="btn btn-primary">
      &darr;
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
    </ul>
  </div>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
</div>
<div class="list-group-item fade-in">
  <div class="pull-right dropdown open">
    <button class="btn btn-primary">
      &darr;
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
    </ul>
  </div>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
</div>

添加 `animation` 声明会弄乱 z-indexes，有点像

Adding an `animation` declaration messes up the z-indexes, kind of

css

z-index

overflow

css-animations