<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')
  })
})