ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

View Transition: Only apply to menu when active (#5771)

Browse Source
This commit is contained in:
zubiden 2025-03-27 19:03:19 +01:00 committed by Alexander Zinchuk
parent 4a96153245
commit f8bbdfaca2
3 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/ui/Menu.scss
View File

@ -33,7 +33,10 @@
&.open {
transform: scale(1);
view-transition-name: open-menu-bubble;
.active-view-transition & {
view-transition-name: open-menu-bubble;
}
}
&.closing {

1
src/config.ts
View File

@ -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}`;

12
src/hooks/animations/useViewTransition.ts
View File

@ -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;
}