position:absolute 元素扰乱了另一个元素的淡入淡出

Question

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

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

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 can alter its order in the stacking context:

Using this property with a value different than 1 places the element in a new stacking context.

解决方案

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

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(...) 函数。

position:absolute 元素扰乱了另一个元素的淡入淡出

position:absolute element messes up fading of another

css

css-position

fade

opacity

解决方案