CSS不透明度过渡，使其真正线性[关闭]

Question

如何在两个 div 之间转换而在转换过程中不看到页面背景。在这个例子中，我只希望看到数字发生变化：

https://jsfiddle.net/j2td4hd7/15/

过渡缓动设置为linear。

Answer 1

这与缓动没有任何关系，只是你不必要地转换了两个元素。

这很容易过于复杂 - 而不是将两个图像视为堆栈：底部的图像可以始终保持可见，只有顶部的图像需要淡入和淡出。

下面比较：

goodswap = function() {
  $('#div2').fadeToggle(); // transitions the top element in and out
}

badswap = function() {
  $('#div1, #div2').fadeToggle(); // transitions both elements in and out
}

.block-div {
  position: absolute;
  height: 200px;
  width: 400px;
  color: #fff;
  font-size: 40px;
  text-align: center;
}
.container { position: relative }
#div1 { background-color: red;}
#div2 { background-color: brown; display: none;}
#div3 { background-color: blue }

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

<button onclick="goodswap()">Good fade</button>
<button onclick="badswap()">Bad fade</button>

<div class="container">
  <div class="block-div" id="div3">(This is the page background)</div>
  <div class="block-div" id="div1">1</div>
  <div class="block-div" id="div2">2</div>
</div>

如果图像尺寸不同，只要将较大的图像与较高的 z-index 堆叠在一起，此技术仍然有效。为了防止页面的其余部分跳来跳去，请将容器的大小设置为较大图像的大小。

goodswap = function() {
  $('#div2').fadeToggle(); // transitions the top element in and out
}

badswap = function() {
  $('#div1, #div2').fadeToggle(); // transitions both elements in and out
}

.block-div {
  position: absolute;
  height: 200px;
  width: 400px;
  color: #fff;
  font-size: 40px;
  text-align: center;
}
.container { position: relative }
#div1 { background-color: red;}
#div2 { background-color: brown; width: 500px; display: none;}
#div3 { background-color: blue }

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

<button onclick="goodswap()">Good fade</button>
<button onclick="badswap()">Bad fade</button>

<div class="container">
  <div class="block-div" id="div3">(This is the page background)</div>
  <div class="block-div" id="div1">1</div>
  <div class="block-div" id="div2">2</div>
</div>

Answer 2

如果您有两个元素具有黑色背景且每个元素的不透明度为 50% - 它们不组合成 100% 黑色:)

检查以下内容：

div {
  background: black;
  width: 150px;
  height: 150px;
  position: absolute;
}
div.half {
  opacity: 0.5;
  left: 0;
  top: 0;
}
div.full {
  top: 0;
  left: 150px;
}

<div class="half"></div>
<div class="half"></div>
<div class="full"></div>

在动画期间 - 两个元素的不透明度从 0 变为 100 和从 100 变为 0，但背景颜色没有“组合”。

我认为以下内容将提供您正在寻找的内容：

window.swap = function(divId){
	if(divId === 'div1'){
  	jQuery('#div1').css('zIndex', 1);
    jQuery('#div2').css('zIndex', 2);
    jQuery('#div2').fadeIn({easing: 'linear', complete: function() {
      jQuery('#div1').fadeOut({easing: 'linear'})
      } }
    );
  }else{
  	jQuery('#div2').css('zIndex', 1);
    jQuery('#div1').css('zIndex', 2);
    jQuery('#div1').fadeIn({easing: 'linear', complete: function() {
      jQuery('#div2').fadeOut({easing: 'linear'})
      }
    });
  }
}

.block-div {
  position: absolute;
  height: 200px;
  width: 400px;
  color: #fff;
  font-size: 40px;
  text-align: center;
}

#div2{ display: none; background-color: brown; }
#div1{ background-color: red; }

html, body{
  background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-div" onclick="swap('div1')" id="div1">1</div>
<div class="block-div" onclick="swap('div2')" id="div2">2</div>

关于 OP 中的 cmets 的注意事项：
如果您希望两个具有不同高度的元素具有相同的效果，您可以创建两个虚拟 div，一个用于您拥有的每个 div。 dummy1 的大小与 div1 相同，但包含 div2 的 bg，dummy2 也是如此。现在您可以使用这些虚拟 div 进行转换。