In my React application, I am working on implementing smooth page transitions for a more visually appealing user experience. While using simple fade-in/fade-out transitions, I have noticed that transitions between pages with similar content are not as smooth as I would like them to be. This is particularly evident when only the text changes between these pages. To illustrate this issue, you can refer to the example provided in the codepen link below.
My understanding of the transition effect is that a linear fade-out of layer A overlapping with a similar linear fade-in of layer B should result in a constant color for pixels that are the same in both layers. However, as shown in the codepen example, the transition does not produce the desired effect, and I am unsure why this is happening. Is there a way to achieve the desired result where color B replaces color A for different pixels, but remains the same for identical pixels?
Below is the code snippet for the corresponding 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"));
});
});
UPDATE: I have managed to partially address the issue by adjusting the transparency of the underlying layer. By keeping the opacity of the underlying layer at 1, the second layer effectively hides the background, resulting in a smoother transition when the foremost layer fades in. While this solution may not achieve a perfect cross-fade effect, it has significantly improved the visual outcome on the screen.