From f8bbdfaca281ca1a599d6f284eb0cf5a7fe4fa03 Mon Sep 17 00:00:00 2001
From: zubiden <19638254+zubiden@users.noreply.github.com>
Date: Thu, 27 Mar 2025 19:03:19 +0100
Subject: [PATCH] View Transition: Only apply to menu when active (#5771)

---
 src/components/ui/Menu.scss               |  5 ++++-
 src/config.ts                             |  1 +
 src/hooks/animations/useViewTransition.ts | 12 +++++++++++-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/Menu.scss b/src/components/ui/Menu.scss
index 3057ea7a0..08a76fe77 100644
--- a/src/components/ui/Menu.scss
+++ b/src/components/ui/Menu.scss
@@ -33,7 +33,10 @@
 
     &.open {
       transform: scale(1);
-      view-transition-name: open-menu-bubble;
+
+      .active-view-transition & {
+        view-transition-name: open-menu-bubble;
+      }
     }
 
     &.closing {
diff --git a/src/config.ts b/src/config.ts
index 985f5be7c..0f568e603 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -154,6 +154,7 @@ export const EDITABLE_STORY_INPUT_CSS_SELECTOR = `#${EDITABLE_STORY_INPUT_ID}`;
 export const CUSTOM_APPENDIX_ATTRIBUTE = 'data-has-custom-appendix';
 export const MESSAGE_CONTENT_CLASS_NAME = 'message-content';
 export const MESSAGE_CONTENT_SELECTOR = '.message-content';
+export const VIEW_TRANSITION_CLASS_NAME = 'active-view-transition';
 
 export const RESIZE_HANDLE_CLASS_NAME = 'resizeHandle';
 export const RESIZE_HANDLE_SELECTOR = `.${RESIZE_HANDLE_CLASS_NAME}`;
diff --git a/src/hooks/animations/useViewTransition.ts b/src/hooks/animations/useViewTransition.ts
index 05b75911d..844d6a86e 100644
--- a/src/hooks/animations/useViewTransition.ts
+++ b/src/hooks/animations/useViewTransition.ts
@@ -4,7 +4,8 @@ import {
   useState,
 } from '../../lib/teact/teact';
 
-import { requestNextMutation } from '../../lib/fasterdom/fasterdom';
+import { VIEW_TRANSITION_CLASS_NAME } from '../../config';
+import { requestMutation, requestNextMutation } from '../../lib/fasterdom/fasterdom';
 import Deferred from '../../util/Deferred';
 import { IS_VIEW_TRANSITION_SUPPORTED } from '../../util/windowEnvironment';
 
@@ -41,6 +42,9 @@ export function useViewTransition(): ViewTransitionController {
 
     transition.finished.then(() => {
       setTransitionState('idle');
+      requestMutation(() => {
+        document.body.classList.remove(VIEW_TRANSITION_CLASS_NAME);
+      });
       hasActiveTransition = false;
     });
 
@@ -50,6 +54,9 @@ export function useViewTransition(): ViewTransitionController {
       // eslint-disable-next-line no-console
       console.error(e);
       setTransitionState('skipped');
+      requestMutation(() => {
+        document.body.classList.remove(VIEW_TRANSITION_CLASS_NAME);
+      });
       hasActiveTransition = false;
     });
   }, [transitionState]);
@@ -63,6 +70,9 @@ export function useViewTransition(): ViewTransitionController {
 
     domUpdaterFn.current = updateCallback;
     setTransitionState('capturing-old');
+    requestMutation(() => {
+      document.body.classList.add(VIEW_TRANSITION_CLASS_NAME);
+    });
     hasActiveTransition = true;
   }