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

Transition: Fix unmounting active slide

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-04-26 21:14:44 +04:00
parent ce9e5b03d8
commit 2ca0079f9e
3 changed files with 46 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/App.tsx
View File

@ -42,8 +42,8 @@ type StateProps = {
enum AppScreens {
auth,
lock,
main,
lock,
inactive,
}

73
src/components/ui/Transition.tsx
View File

@ -175,11 +175,11 @@ function Transition({
activeKey,
currentKeyRef,
container,
childNodes[activeIndex],
childNodes[prevActiveIndex],
shouldRestoreHeight,
onStart,
onStop,
childNodes[activeIndex] as HTMLElement,
childNodes[prevActiveIndex] as HTMLElement,
);
return;
@ -347,27 +347,27 @@ function performSlideOptimized(
activeKey: number,
currentKeyRef: { current: number | undefined },
container: HTMLElement,
toSlide: ChildNode,
fromSlide?: ChildNode,
shouldRestoreHeight?: boolean,
onStart?: NoneToVoidFunction,
onStop?: NoneToVoidFunction,
toSlide?: HTMLElement,
fromSlide?: HTMLElement,
) {
if (!fromSlide || !toSlide) {
return;
}
if (shouldDisableAnimation) {
toggleExtraClass(container, `Transition-${name}`, !isBackwards);
toggleExtraClass(container, `Transition-${name}Backwards`, isBackwards);
fromSlide.style.transition = 'none';
fromSlide.style.transform = '';
removeExtraClass(fromSlide, CLASSES.active);
if (fromSlide instanceof HTMLElement) {
fromSlide.style.transition = 'none';
fromSlide.style.transform = '';
removeExtraClass(fromSlide, CLASSES.active);
}
toSlide.style.transition = 'none';
toSlide.style.transform = 'translate3d(0, 0, 0)';
addExtraClass(toSlide, CLASSES.active);
if (toSlide instanceof HTMLElement) {
toSlide.style.transition = 'none';
toSlide.style.transform = 'translate3d(0, 0, 0)';
addExtraClass(toSlide, CLASSES.active);
}
cleanup();
@ -385,39 +385,50 @@ function performSlideOptimized(
toggleExtraClass(container, `Transition-${name}`, !isBackwards);
toggleExtraClass(container, `Transition-${name}Backwards`, isBackwards);
fromSlide.style.transition = 'none';
fromSlide.style.transform = 'translate3d(0, 0, 0)';
if (fromSlide instanceof HTMLElement) {
fromSlide.style.transition = 'none';
fromSlide.style.transform = 'translate3d(0, 0, 0)';
}
toSlide.style.transition = 'none';
toSlide.style.transform = `translate3d(${isBackwards ? '-' : ''}100%, 0, 0)`;
if (toSlide instanceof HTMLElement) {
toSlide.style.transition = 'none';
toSlide.style.transform = `translate3d(${isBackwards ? '-' : ''}100%, 0, 0)`;
}
requestForcedReflow(() => {
forceReflow(toSlide);
if (toSlide instanceof HTMLElement) {
forceReflow(toSlide);
}
return () => {
fromSlide.style.transition = '';
fromSlide.style.transform = `translate3d(${isBackwards ? '' : '-'}100%, 0, 0)`;
if (fromSlide instanceof HTMLElement) {
fromSlide.style.transition = '';
fromSlide.style.transform = `translate3d(${isBackwards ? '' : '-'}100%, 0, 0)`;
removeExtraClass(fromSlide, CLASSES.active);
}
toSlide.style.transition = '';
toSlide.style.transform = 'translate3d(0, 0, 0)';
removeExtraClass(fromSlide, CLASSES.active);
addExtraClass(toSlide, CLASSES.active);
if (toSlide instanceof HTMLElement) {
toSlide.style.transition = '';
toSlide.style.transform = 'translate3d(0, 0, 0)';
addExtraClass(toSlide, CLASSES.active);
}
};
});
waitForTransitionEnd(fromSlide, () => {
const { clientHeight } = toSlide;
waitForTransitionEnd(toSlide, () => {
const clientHeight = toSlide instanceof HTMLElement ? toSlide.clientHeight : undefined;
requestMutation(() => {
if (activeKey !== currentKeyRef.current) {
return;
}
fromSlide.style.transition = 'none';
fromSlide.style.transform = '';
if (fromSlide instanceof HTMLElement) {
fromSlide.style.transition = 'none';
fromSlide.style.transform = '';
}
if (shouldRestoreHeight) {
if (shouldRestoreHeight && clientHeight && toSlide instanceof HTMLElement) {
toSlide.style.height = 'auto';
container.style.height = `${clientHeight}px`;
}

6
src/lib/teact/teact-dom.ts
View File

@ -710,7 +710,7 @@ function updateClassName(element: HTMLElement, value: string) {
export function addExtraClass(element: Element, className: string, forceSingle = false) {
if (!forceSingle) {
const classNames = className.split(' ');
if (className.length > 1) {
if (classNames.length > 1) {
classNames.forEach((cn) => {
addExtraClass(element, cn, true);
});
@ -732,7 +732,7 @@ export function addExtraClass(element: Element, className: string, forceSingle =
export function removeExtraClass(element: Element, className: string, forceSingle = false) {
if (!forceSingle) {
const classNames = className.split(' ');
if (className.length > 1) {
if (classNames.length > 1) {
classNames.forEach((cn) => {
removeExtraClass(element, cn, true);
});
@ -756,7 +756,7 @@ export function removeExtraClass(element: Element, className: string, forceSingl
export function toggleExtraClass(element: Element, className: string, force?: boolean, forceSingle = false) {
if (!forceSingle) {
const classNames = className.split(' ');
if (className.length > 1) {
if (classNames.length > 1) {
classNames.forEach((cn) => {
toggleExtraClass(element, cn, force, true);
});