feat(component): startScopedViewTranstion func to support scoped view transition (#8093)

AF-1293

packages/frontend/component/src/ui/modal/modal.tsx

@@ -12,6 +12,7 @@ import clsx from 'clsx';
 import type { CSSProperties, MouseEvent } from 'react';
 import { forwardRef, useCallback, useEffect, useState } from 'react';
 
+import { startScopedViewTransition } from '../../utils';
 import type { IconButtonProps } from '../button';
 import { IconButton } from '../button';
 import * as styles from './styles.css';
@@ -86,21 +87,19 @@ class ModalTransitionContainer extends HTMLElement {
     }
 
     this.animationFrame = requestAnimationFrame(() => {
-      if (typeof document.startViewTransition === 'function') {
-        const nodes = this.pendingTransitionNodes;
+      const nodes = this.pendingTransitionNodes;
+      nodes.forEach(child => {
+        if (child instanceof HTMLElement) {
+          child.classList.add('vt-active');
+        }
+      });
+      startScopedViewTransition(styles.modalVTScope, () => {
         nodes.forEach(child => {
-          if (child instanceof HTMLElement) {
-            child.classList.add('vt-active');
-          }
+          // eslint-disable-next-line unicorn/prefer-dom-node-remove
+          super.removeChild(child);
         });
-        document.startViewTransition(() => {
-          nodes.forEach(child => {
-            // eslint-disable-next-line unicorn/prefer-dom-node-remove
-            super.removeChild(child);
-          });
-        });
-        this.pendingTransitionNodes = [];
-      }
+      });
+      this.pendingTransitionNodes = [];
     });
   }
 }

packages/frontend/component/src/ui/modal/styles.css.ts

@@ -7,10 +7,14 @@ import {
   keyframes,
   style,
 } from '@vanilla-extract/css';
+
+import { vtScopeSelector } from '../../utils/view-transition';
 export const widthVar = createVar('widthVar');
 export const heightVar = createVar('heightVar');
 export const minHeightVar = createVar('minHeightVar');
 
+export const modalVTScope = generateIdentifier('modal');
+
 const overlayShow = keyframes({
   from: {
     opacity: 0,
@@ -94,14 +98,14 @@ export const modalContentWrapper = style({
       animation: `${contentShowFadeScaleTop} 150ms cubic-bezier(0.42, 0, 0.58, 1)`,
       animationFillMode: 'forwards',
     },
-    '&.anim-fadeScaleTop.vt-active': {
+    [`${vtScopeSelector(modalVTScope)} &.anim-fadeScaleTop.vt-active`]: {
       viewTransitionName: modalContentViewTransitionNameFadeScaleTop,
     },
     '&.anim-slideBottom': {
       animation: `${contentShowSlideBottom} 0.23s ease`,
       animationFillMode: 'forwards',
     },
-    '&.anim-slideBottom.vt-active': {
+    [`${vtScopeSelector(modalVTScope)} &.anim-slideBottom.vt-active`]: {
       viewTransitionName: modalContentViewTransitionNameSlideBottom,
     },
   },