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>