CSS不透明度转换，使其真正线性

Question

如何在两个div之间转换，而无需在转换过程中查看页面的背景。在这个例子中，我希望刚才看到的数字变化：

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

过渡宽松设为linear。

Answer 1

如果你有黑色的背景和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，但背景颜色不是“合并”。

我认为有以下将为您在找什么：
如果你想有两个要素相同的效果：关于从OP评论

window.swap = function(divId){ 
 
\t if(divId === 'div1'){ 
 
    \t jQuery('#div1').css('zIndex', 1); 
 
    jQuery('#div2').css('zIndex', 2); 
 
    jQuery('#div2').fadeIn({easing: 'linear', complete: function() { 
 
     jQuery('#div1').fadeOut({easing: 'linear'}) 
 
     } } 
 
    ); 
 
    }else{ 
 
    \t 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>

注有不同的高度，您可以创建两个虚拟div，每个div有一个。 dummy1的尺寸为div1，但包含div2的bg，而dummy2的尺寸也相同。现在您可以使用这些虚拟div进行转换。

Answer 2

这与放松没有任何关系，这是您不必要地转换这两个元素。

很容易过分复杂化 - 而是将两张图像想象成一个堆栈：底部的图像可以一直保持可见，只有顶部的图像需要淡入淡出。

以下比较：

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索引。为了避免页面的其余部分跳动，请将容器的大小设置为较大图像的大小。

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>