fix(component): nested modal view-transition support (#8073)

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/LakojjjzZNf6ogjOVwKE/b8033923-8f08-4c72-96b6-d790fc0ff703.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/LakojjjzZNf6ogjOVwKE/b8033923-8f08-4c72-96b6-d790fc0ff703.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/b8033923-8f08-4c72-96b6-d790fc0ff703.mp4">CleanShot 2024-09-03 at 18.36.17.mp4</video>
This commit is contained in:
CatsJuice
2024-09-04 01:29:22 +00:00
parent ec3b97d069
commit 0d6f468385
3 changed files with 45 additions and 2 deletions
@@ -89,6 +89,11 @@ class ModalTransitionContainer extends HTMLElement {
this.animationFrame = requestAnimationFrame(() => {
if (typeof document.startViewTransition === 'function') {
const nodes = this.pendingTransitionNodes;
nodes.forEach(child => {
if (child instanceof HTMLElement) {
child.classList.add('vt-active');
}
});
document.startViewTransition(() => {
nodes.forEach(child => {
// eslint-disable-next-line unicorn/prefer-dom-node-remove