Добавление объявления "анимация" испортило z-индексы, вроде

Используя собственные классы Bootstrap, у меня есть список элементов .list-group-item, в котором есть некоторые доступные для клика параметры, которые отображаются как выпадающие списки в .dropdown-menu. По умолчанию это работает отлично, даже если выпадающий список одного элемента .list-group-item переместится над тем, который находится под ним.

То, что я добавил, - это объявление animation, которое исчезает в .list-group-item, используя анимацию @keyframes, идущую от opacity:0 до opacity:1. И как побочный эффект этого, каждый элемент .list-group-item визуально отображается в выпадающем меню из предыдущего.

(на самом деле нет каких-либо объявлений z-index, я использовал этот термин только в заголовке, чтобы проиллюстрировать возникновение проблемы)

Мне интересно, есть ли какой-то обходной путь для этой переполняющей проблемы, которая позволила бы мне сохранить анимацию затухания для элементов?

Пример можно увидеть на следующем скрипте (нет 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; }
}

Ответ 1

Проблема заключается в том, что когда непрозрачность не 1, она создает новый контекст стекирования (см. Контекст стекирования - CSS | MDN)

Решение состоит в том, чтобы добавить a 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>

Ответ 2

Как объяснила Габи, анимация 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>