添加一个`animation`声明可以搞砸z索引

Question

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

我已添加的内容是animation声明，.list-group-item使用从@keyframes到opacity:0的{​​{1}}动画淡出}。并且作为其副作用，每个opacity:1元素在前一个下拉菜单中可视化。

（实际上并没有涉及任何.list-group-item声明，我只在标题中使用该术语来说明问题的表现形式）

我想知道这个溢出的问题是否有某种解决方法可以让我保留元素的淡入动画？

可以在下面的小提琴上看到一个例子（没有涉及或包含javascript，因为它不是必需的，因此两个下拉列表都在HTML代码中声明为打开以说明情况）：

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

HTML：

z-index

CSS：

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

Answer 1

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

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

像（假设他们是兄弟姐妹）

@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动画。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;