feat: page transitions

ui/components/app/wallet-overview/coin-buttons.tsx

@@ -12,6 +12,7 @@ import { getNativeAssetForChainId } from '@metamask/bridge-controller';
 
 import { InternalAccount } from '@metamask/keyring-internal-api';
 import { ChainId } from '../../../../shared/constants/network';
+import { transitionForward } from '../../ui/transition';
 
 import { I18nContext } from '../../../contexts/i18n';
 
@@ -266,11 +267,9 @@ const CoinButtons = ({
 
     // Native Send flow
     await setCorrectChain();
-    let params;
-    if (trackingLocation !== 'home') {
-      params = { chainId: chainId.toString() };
-    }
-    navigateToSendRoute(navigate, params);
+    const params: { chainId?: string } | undefined =
+      trackingLocation === 'home' ? undefined : { chainId: chainId.toString() };
+    transitionForward(() => navigateToSendRoute(navigate, params));
   }, [chainId, account, setCorrectChain, handleSendNonEvm, trackingLocation]);
 
   const handleBuyAndSellOnClick = useCallback(() => {
@@ -331,8 +330,10 @@ const CoinButtons = ({
 
     if (selectedAccountGroup) {
       // Navigate to the multichain address list page with receive source
-      navigate(
-        `${MULTICHAIN_ACCOUNT_ADDRESS_LIST_PAGE_ROUTE}/${encodeURIComponent(selectedAccountGroup)}?${AddressListQueryParams.Source}=${AddressListSource.Receive}`,
+      transitionForward(() =>
+        navigate(
+          `${MULTICHAIN_ACCOUNT_ADDRESS_LIST_PAGE_ROUTE}/${encodeURIComponent(selectedAccountGroup)}?${AddressListQueryParams.Source}=${AddressListSource.Receive}`,
+        ),
       );
     } else {
       // Show the traditional receive modal

ui/components/multichain/account-overview/account-overview-tabs.tsx

@@ -36,6 +36,7 @@ import { Tab, Tabs } from '../../ui/tabs';
 import { useTokenBalances } from '../../../hooks/useTokenBalances';
 import { ActivityList } from '../activity-v2/activity-list';
 import { usePrefetchTransactions } from '../activity-v2/hooks';
+import { transitionForward } from '../../ui/transition';
 import { AccountOverviewCommonProps } from './common';
 import { AssetListTokenDetection } from './asset-list-token-detection';
 
@@ -132,7 +133,9 @@ export const AccountOverviewTabs = ({
 
   const onClickAsset = useCallback(
     (chainId: string, asset: string) =>
-      navigate(`${ASSET_ROUTE}/${chainId}/${encodeURIComponent(asset)}`),
+      transitionForward(() =>
+        navigate(`${ASSET_ROUTE}/${chainId}/${encodeURIComponent(asset)}`),
+      ),
     [navigate],
   );
   const onClickDeFi = useCallback(

ui/components/multichain/app-header/app-header-unlocked-content.tsx

@@ -60,6 +60,7 @@ import {
   ACCOUNT_LIST_PAGE_ROUTE,
   REVIEW_PERMISSIONS,
 } from '../../../helpers/constants/routes';
+import { transitionForward } from '../../ui/transition';
 import VisitSupportDataConsentModal from '../../app/modals/visit-support-data-consent-modal';
 import {
   getShowSupportDataConsentModal,
@@ -199,7 +200,7 @@ export const AppHeaderUnlockedContent = ({
                 name: TraceName.ShowAccountList,
                 op: TraceOperation.AccountUi,
               });
-              navigate(ACCOUNT_LIST_PAGE_ROUTE);
+              transitionForward(() => navigate(ACCOUNT_LIST_PAGE_ROUTE));
               trackEvent({
                 event: MetaMetricsEventName.NavAccountMenuOpened,
                 category: MetaMetricsEventCategory.Navigation,

ui/components/multichain/receive-modal/receive-modal.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
@@ -24,16 +24,58 @@
     metadata: { name },
   } = useSelector((state) => getInternalAccountByAddress(state, address));
   const data = useMemo(() => ({ data: address }), [address]);
+  const dialogRef = useRef(null);
+  const hasClosedRef = useRef(false);
 
   useEffect(() => {
     endTrace({ name: TraceName.ReceiveModal });
   }, []);
 
+  const closeOnce = useCallback(() => {
+    if (hasClosedRef.current) {
+      return;
+    }
+    hasClosedRef.current = true;
+    onClose();
+  }, [onClose]);
+
+  const handleClose = useCallback(() => {
+    const el = dialogRef.current?.querySelector('.mm-modal-content__dialog');
+    if (!el) {
+      closeOnce();
+      return;
+    }
+    const didReplace = el.classList.replace(
+      'page-enter-animation',
+      'page-exit-animation',
+    );
+    if (!didReplace) {
+      closeOnce();
+      return;
+    }
+
+    el.addEventListener('animationend', closeOnce, { once: true });
+    el.addEventListener('animationcancel', closeOnce, { once: true });
+
+    window.requestAnimationFrame(() => {
+      if (typeof el.getAnimations !== 'function') {
+        return;
+      }
+
+      if (el.getAnimations().length === 0) {
+        closeOnce();
+      }
+    });
+  }, [closeOnce]);
+
   return (
-    <Modal isOpen onClose={onClose}>
+    <Modal isOpen onClose={handleClose}>
       <ModalOverlay />
-      <ModalContent>
-        <ModalHeader marginBottom={4} onClose={onClose}>
+      <ModalContent
+        ref={dialogRef}
+        modalDialogProps={{ className: 'page-enter-animation' }}
+      >
+        <ModalHeader marginBottom={4} onClose={handleClose}>
           {t('receive')}
         </ModalHeader>
         <Box

ui/components/ui/transition.ts

@@ -0,0 +1,36 @@
+import { getBrowserName } from '../../../shared/modules/browser-runtime.utils';
+import { PLATFORM_FIREFOX } from '../../../shared/constants/app';
+
+const isTransitionSupported = () => {
+  if (process.env.IN_TEST || getBrowserName() === PLATFORM_FIREFOX) {
+    return false;
+  }
+
+  return Boolean(document.startViewTransition);
+};
+
+const transitionSupported = isTransitionSupported();
+type TransitionCallback = () => void | Promise<void>;
+
+const startTransition = (
+  direction: 'forward' | 'back',
+  callback: TransitionCallback,
+) => {
+  if (!transitionSupported) {
+    callback();
+    return;
+  }
+  document.documentElement.dataset.pageTransition = direction;
+  const transition = document.startViewTransition(callback);
+  transition.finished.finally(() => {
+    delete document.documentElement.dataset.pageTransition;
+  });
+};
+
+export const transitionForward = (callback: TransitionCallback) => {
+  startTransition('forward', callback);
+};
+
+export const transitionBack = (callback: TransitionCallback) => {
+  startTransition('back', callback);
+};

ui/css/index.scss

@@ -5,6 +5,7 @@
 @import './utilities/fonts.scss';
 @import './utilities/colors.scss';
 @import './utilities/opacity.scss';
+@import './utilities/page-transitions.scss';
 @import './base-styles.scss';
 @import '../components/component-library/component-library-components.scss';
 @import '../components/app/app-components';

ui/css/utilities/page-transitions.scss

@@ -0,0 +1,98 @@
+/* Specs */
+:root {
+  --page-transition-duration: 180ms;
+  --page-transition-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --page-transition-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --page-scale-distance: 0.97;
+}
+
+/* Clip overflow and make size changes instant (don't animate height) */
+::view-transition-group(root) {
+  overflow: hidden;
+  animation-duration: 0s;
+}
+
+/* Disable default crossfade blending */
+::view-transition-image-pair(root) {
+  isolation: auto;
+}
+
+/* Avoid ghosting */
+::view-transition-old(root),
+::view-transition-new(root) {
+  mix-blend-mode: normal;
+}
+
+/* Forward: old fades out, new fades in + scale up */
+:root[data-page-transition='forward']::view-transition-old(root) {
+  animation: fade-out var(--page-transition-duration) var(--page-transition-ease-in) both;
+}
+
+:root[data-page-transition='forward']::view-transition-new(root) {
+  animation: page-enter var(--page-transition-duration) var(--page-transition-ease-out) both;
+}
+
+/* Back: old fades out + scale down, new fades in */
+:root[data-page-transition='back']::view-transition-old(root) {
+  animation: page-exit var(--page-transition-duration) var(--page-transition-ease-in) both;
+}
+
+:root[data-page-transition='back']::view-transition-new(root) {
+  animation: fade-in var(--page-transition-duration) var(--page-transition-ease-out) both;
+}
+
+@keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes page-enter {
+  from {
+    opacity: 0;
+    transform: scale(var(--page-scale-distance));
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes page-exit {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(var(--page-scale-distance));
+  }
+}
+
+/* Respect reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation-duration: 0.01ms !important;
+  }
+
+  .page-enter-animation,
+  .page-exit-animation {
+    animation-duration: 0.01ms !important;
+  }
+}
+
+/* Modal enter/exit animations (used by receive-modal) */
+.page-enter-animation {
+  animation: page-enter var(--page-transition-duration) var(--page-transition-ease-out) both;
+}
+
+.page-exit-animation {
+  animation: page-exit var(--page-transition-duration) var(--page-transition-ease-in) both;
+}

ui/hooks/bridge/useBridging.ts

@@ -13,6 +13,7 @@ import { BridgeQueryParams } from '../../../shared/lib/deep-links/routes/swap';
 import { trace, TraceName } from '../../../shared/lib/trace';
 import { toAssetId } from '../../../shared/lib/asset-utils';
 import { ALL_ALLOWED_BRIDGE_CHAIN_IDS } from '../../../shared/constants/bridge';
+import { transitionForward } from '../../components/ui/transition';
 import {
   getBip44DefaultPairsConfig,
   getFromChain,
@@ -81,7 +82,7 @@ const useBridging = () => {
         }),
       );
 
-      const queryParams = [];
+      const queryParams: string[] = [];
       const navigationState: Partial<Record<'srcToken', MinimalAsset>> = {};
 
       const assetId =
@@ -120,11 +121,14 @@ const useBridging = () => {
       }
 
       const url = `${CROSS_CHAIN_SWAP_ROUTE}${PREPARE_SWAP_ROUTE}`;
-      navigate([url, queryParams.join('&')].filter(Boolean).join('?'), {
-        state: navigationState,
-      });
+      transitionForward(() =>
+        navigate([url, queryParams.join('&')].filter(Boolean).join('?'), {
+          state: navigationState,
+        }),
+      );
     },
     [
+      dispatch,
       navigate,
       lastSelectedChainId,
       fromChain?.chainId,

ui/pages/asset/components/asset-page.tsx

@@ -54,6 +54,7 @@ import { DEFAULT_ROUTE } from '../../../helpers/constants/routes';
 import { getPortfolioUrl } from '../../../helpers/utils/portfolio';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { useMultichainSelector } from '../../../hooks/useMultichainSelector';
+import { transitionBack } from '../../../components/ui/transition';
 import {
   getDataCollectionForMarketing,
   getIsBridgeChain,
@@ -247,7 +248,7 @@ const AssetPage = ({
             size={ButtonIconSize.Sm}
             ariaLabel={t('back')}
             iconName={IconName.ArrowLeft}
-            onClick={() => navigate(DEFAULT_ROUTE)}
+            onClick={() => transitionBack(() => navigate(DEFAULT_ROUTE))}
           />
         </Box>
         {optionsButton}

ui/pages/bridge/index.tsx

@@ -37,6 +37,7 @@ import { useQuoteFetchEvents } from '../../hooks/bridge/useQuoteFetchEvents';
 import { TextVariant } from '../../helpers/constants/design-system';
 import { useTxAlerts } from '../../hooks/bridge/useTxAlerts';
 import { getFromChain, getBridgeQuotes } from '../../ducks/bridge/selectors';
+import { transitionBack } from '../../components/ui/transition';
 import PrepareBridgePage from './prepare/prepare-bridge-page';
 import AwaitingSignaturesCancelButton from './awaiting-signatures/awaiting-signatures-cancel-button';
 import AwaitingSignatures from './awaiting-signatures/awaiting-signatures';
@@ -103,13 +104,17 @@ const CrossChainSwap = () => {
   // Sets tx alerts for the active quote
   useTxAlerts();
 
-  const redirectToDefaultRoute = async () => {
-    await resetControllerAndInputStates();
-    if (isFromTransactionShield) {
-      navigate(TRANSACTION_SHIELD_ROUTE);
-    } else {
-      navigate(DEFAULT_ROUTE, { state: { stayOnHomePage: true } });
-    }
+  const redirectToDefaultRoute = () => {
+    const doNavigate = async () => {
+      await resetControllerAndInputStates();
+      if (isFromTransactionShield) {
+        navigate(TRANSACTION_SHIELD_ROUTE);
+      } else {
+        navigate(DEFAULT_ROUTE, { state: { stayOnHomePage: true } });
+      }
+    };
+
+    transitionBack(() => doNavigate().catch(() => undefined));
   };
 
   const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);