Please see the following codepen: https://codepen.io/danchristofi/pen/abQzMLM
<button id="show">Show box</button>
<div id="box"></div>
<footer class="footer"></footer>
#box {
width: 300px;
height: 2000px;
background: #000;
display: none;
view-transition-name: box;
}
.footer {
position: fixed;
width: 100%;
height: 100px;
background: red;
bottom: 0;
left: 0;
z-index: 100;
view-transition-name: footer;
}
.visible {
display: block !important;
}
::view-transition-old(box),
::view-transition-new(box) {
animation-duration: 10s;
}
document.getElementById("show").addEventListener("click", () => {
document.startViewTransition(() => {
document.getElementById("box").classList.toggle('visible')
})
})
When adding a class to make the box visible, it appears over the top of the fixed element. In this example the red bar is fixed to the bottom of the page with the box behind it. After the animation is finished the box returns behind the footer.
Removing the view-transition-name from the box stops this happening, but it would be needed if you want a custom animation.
Is this a bug or is there any extra styling needed to get this to work correctly?
Please see the following codepen: https://codepen.io/danchristofi/pen/abQzMLM
When adding a class to make the box visible, it appears over the top of the fixed element. In this example the red bar is fixed to the bottom of the page with the box behind it. After the animation is finished the box returns behind the footer.
Removing the view-transition-name from the box stops this happening, but it would be needed if you want a custom animation.
Is this a bug or is there any extra styling needed to get this to work correctly?