位置：绝对元素搞砸了另一个的褪色

Question

我正在尝试淡化文本，但它只是弹出到结束状态而不会在中间淡出（部分也有延迟）。

我正在使用 CSS 进行淡入淡出（opacity: 0/1 和 transform: opacity），经过大量调试后，我发现这是由于下面完全不相关的 position: absolute 元素而发生的。这是一个小提琴：

var $root = $('.root');
$('#butt_fadetext').click(function(){
  $root.toggleClass('dermineyda');
});
$('#butt_hidefancy').click(function(){
  $root.toggleClass('nofancy');
});

.root {
  background-color: #b87988;
}

.container {
  transition: opacity 0.5s;
  opacity: 1;
  height: 100px;
}

.dermineyda .container {
  opacity: 0;
}

.inn {
  position: absolute;
  z-index: 1;
}

.unrelated {
  background-color: blanchedalmond;
  width: 100px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
}

.nofancy .unrelated {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="root">
  <div class="container">
    <div class="inn">text</div>
  </div>
  <div class="unrelated">fancy fx</div>
</div>
<input type="button" value="fade text" id="butt_fadetext" />
<input type="button" value="hide fancy fx" id="butt_hidefancy" />

Answer 1

我刚刚了解到，更改元素的 opacity 可以改变其在 stacking context 中的顺序：

使用此属性的值不同于 1 会放置元素 在新的堆叠上下文中。

解决方案

我通过在堆叠上下文中强制其顺序向上来修复它。

var $root = $('.root');
$('#butt_fadetext').click(function(){
  $root.toggleClass('dermineyda');
});
$('#butt_hidefancy').click(function(){
  $root.toggleClass('nofancy');
});

.root {
  background-color: #b87988;
}

.container {
  transition: opacity 0.5s;
  opacity: 1;
  height: 100px;
  position: relative;
  z-index: 500;
}

.dermineyda .container {
  opacity: 0;
}

.inn {
  position: absolute;
  z-index: 1;
}

.unrelated {
  background-color: blanchedalmond;
  width: 100px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
}

.nofancy .unrelated {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="root">
  <div class="container">
    <div class="inn">text</div>
  </div>
  <div class="unrelated">fancy fx</div>
</div>
<input type="button" value="fade text" id="butt_fadetext" />
<input type="button" value="hide fancy fx" id="butt_hidefancy" />

Answer 2

嗯……重新发明代码是没有意义的。您正在使用 jquery，因此请使用 fadeToggle(...) 函数。