CSS双过渡输入输出呈现奇怪

Question

我正在尝试在我的react应用程序中渲染漂亮的页面转换。我选择了简单的渐入/渐出过渡，它们对任意页面都非常有效。但是，碰巧有些页面是完全相同的(只是一个文本更改)，在这种情况下，过渡不是那么好(参见下面的code-pen的具体示例)。

根据我对数学的理解，如果我有两层，假设是A和B, A的线性淡出开始于B的类似线性淡出应该为两层中完全相同颜色的像素提供恒定的像素颜色，不是吗?但正如你在代码中看到的那样，事实并非如此(我希望这两层颜色完全相同，所以没有视觉效果)，我不明白为什么。是否有一种方法来获得所需的结果(对于给定的像素，颜色B取代颜色a，如果他们是不同的，但保持不变，如果他们是相同的)?

https://codepen.io/st-phane-smirnow/pen/dyJaBPG

这里是相应的代码- HTML:

<div class="a1">a1 div</div>
<div class="a2 hidden">a2 div</div>
<button>Switch divs<button>

CSS:

.a1, .a2 {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: red;
transition: all .5s linear;
}
.hidden { opacity: 0; }
button {
position: absolute;
top: 10px;
left: 10px;
}

JS:

window.addEventListener("load", () => {
document.querySelector("button").addEventListener("click", () => {
document
.querySelectorAll("div")
.forEach(d => d.classList.toggle("hidden"));
});
});

编辑:我通过禁用底层的透明度部分地解决了我的问题。这样，应用程序背景，无论它是什么，都被第二层隐藏(不透明度始终为1)，而最前面的层只是在底层中褪色。我不知道，在一个完美的世界里，这个结果是否真的不同于我所得到的真正功能的交叉渐变，但至少它在屏幕上给出了一个好的结果。

Answer 1

这是因为在过渡过程中，它们都是透明的，所以你可以通过它们看到白色的背景。

这里有一篇有趣的文章，展示了一些公式，可能有助于解释为什么最终的颜色不是自始至终的rgb(255,0,0)。基本上，正在引入一些绿色和蓝色通道。

认为90%的红色+ 10%的红色将是100%的红色是合理的，但实际上每一层都让一点点"白光"通过。方法如下:

根据帖子，2层图像的一般公式为:

Y = p*T+(1-p)*B where...
p is the opacity 0...1 of the top layer,
T = rgb number of top layer color,
B is the rgb number of fully opaque bottom layer.
Y is the rgb number of the equivalent fully opaque color. 

所以，假设你有一个白色背景的rgba(255, 0, 0, 0.9)。结果颜色为:

r = 0.9 * 255 + 0.1 * 255 = 255
g = 0.9 * 0   + 0.1 * 255 = 25.5
b = 0.9 * 0   + 0.1 * 255 = 25.5

现在让我们在结果的顶部添加一个rgba(255, 0, 0, 0.1):

r = 0.1 * 255 + 0.9 * 255 = 255
g = 0.1 * 0   + 0.9 * 25.5 = 22.9
b = 0.1 * 0   + 0.9 * 25.5 = 22.9

额外的绿色和蓝色通道使颜色向白色移动。