javascript - CSS TranslateY 使幻灯片在父元素后面动画化

Question

当您单击标题中的链接时，我尝试使用transformY 来制作元素向下滑动的动画。我遇到的问题是所显示的元素嵌套了几层深度，这就是我认为导致问题的原因 - 我需要元素从父元素后面滑落。设置 z-index 似乎在这种情况下不起作用。我在下面创建了一个 JS Fiddle - 感谢您的帮助!在此演示中，绿色父容器应位于黄色隐藏元素的顶部。

jQuery('.test-link').on('click', function(e) {
  e.preventDefault();
  jQuery('.container').toggleClass('active');
});

.outer-container {
  background: green;
  width: 100%;
  position: relative;
  z-index: 5;
}

.container .hidden-content {
  transition: all 0.2s ease;
  transform: translateY(-100%);
  position: absolute;
  z-index: -1;
  z-index: 1;
  width: 100vw;
  left: 0;
  right: 0;
  background: yellow;
}

.test-link {
  margin-left: 100px;
  display: block;
  position: relative;
  z-index: 3;
  width: 200px;
  background: red;
}

.container.active .hidden-content {
  transform: translateY(0%);
}
 
.other-content {
  position: relative;
  z-index: 4;
  background: blue;
}

.test-content {
  position: relative;
  z-index: 5; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="outer-container">
  <div class="test-content">
    <div class="container">
      <a href="#" class="test-link">TEST LINK</a>
      <div class="hidden-content">
        <h1>My Hidden Content</h1>
        <h1>My Hidden Content</h1>
      </div>
    </div>
  </div>
<div class="other-content">
 <h2>This should be overlaid by the sliding out content</h2>
 </div>
</div>

Answer 1

您可以使用负的z-index来做到这一点

jQuery('.test-link').on('click', function(e) {
  e.preventDefault();
  jQuery('.container').toggleClass('active');
});

.another-container {
  position: relative;
  z-index: 1;
}
.outer-container {
  background: green;
  width: 100%;
  position: relative;
}

.container .hidden-content {
  transition: all 0.2s ease;
  transform: translateY(-100%);
  position: absolute;
  background: yellow;
  z-index: -1;
}

.test-link {
  display: block;
  position: relative;
  width: 200px;
  background: red;
}

.container.active .hidden-content {
  transform: translateY(0%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="another-container">
<div class="outer-container">
  <div class="test-content">
    <div class="container">
      <a href="#" class="test-link">TEST LINK</a>
      <div class="hidden-content">
        <h1>My Hidden Content</h1>
        <h1>My Hidden Content</h1>
      </div>
    </div>
  </div>
</div>
</div>
<div>yellow box should be on top</div>