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

[Refactoring] Transition: Use animationend event instead of timeout

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-08-03 19:03:02 +03:00
parent 101a28d01d
commit 03b6b9d079
1 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,8 +4,6 @@ import React, {
} from '../../lib/teact/teact'; } from '../../lib/teact/teact';
import { getGlobal } from '../../lib/teact/teactn'; import { getGlobal } from '../../lib/teact/teactn';
import { ANIMATION_END_DELAY } from '../../config';
import { IS_SINGLE_COLUMN_LAYOUT } from '../../util/environment';
import useForceUpdate from '../../hooks/useForceUpdate'; import useForceUpdate from '../../hooks/useForceUpdate';
import usePrevious from '../../hooks/usePrevious'; import usePrevious from '../../hooks/usePrevious';
import buildClassName from '../../util/buildClassName'; import buildClassName from '../../util/buildClassName';
@ -33,19 +31,6 @@ type OwnProps = {
children: ChildrenFn; children: ChildrenFn;
}; };
const ANIMATION_DURATION = {
slide: 450,
'slide-reversed': 450,
'mv-slide': 400,
'slide-fade': 400,
'zoom-fade': 150,
'scroll-slide': 500,
fade: 150,
'slide-layers': IS_SINGLE_COLUMN_LAYOUT ? 450 : 300,
'push-slide': 300,
reveal: 350,
};
const CLEANED_UP = Symbol('CLEANED_UP'); const CLEANED_UP = Symbol('CLEANED_UP');
const Transition: FC<OwnProps> = ({ const Transition: FC<OwnProps> = ({
@ -74,7 +59,6 @@ const Transition: FC<OwnProps> = ({
const rendersRef = useRef<Record<number, ChildrenFn | typeof CLEANED_UP>>({}); const rendersRef = useRef<Record<number, ChildrenFn | typeof CLEANED_UP>>({});
const prevActiveKey = usePrevious<any>(activeKey); const prevActiveKey = usePrevious<any>(activeKey);
const activateTimeoutRef = useRef<number>();
const forceUpdate = useForceUpdate(); const forceUpdate = useForceUpdate();
const activeKeyChanged = prevActiveKey !== undefined && activeKey !== prevActiveKey; const activeKeyChanged = prevActiveKey !== undefined && activeKey !== prevActiveKey;
@ -110,11 +94,6 @@ const Transition: FC<OwnProps> = ({
return; return;
} }
if (activateTimeoutRef.current) {
clearTimeout(activateTimeoutRef.current);
activateTimeoutRef.current = undefined;
}
const isBackwards = ( const isBackwards = (
direction === -1 direction === -1
|| (direction === 'auto' && prevActiveKey > activeKey) || (direction === 'auto' && prevActiveKey > activeKey)
@ -160,14 +139,17 @@ const Transition: FC<OwnProps> = ({
}); });
} }
let dispatchHeavyAnimationStop: NoneToVoidFunction;
if (animationLevel > 0) { if (animationLevel > 0) {
dispatchHeavyAnimationEvent(ANIMATION_DURATION[name] + ANIMATION_END_DELAY); dispatchHeavyAnimationStop = dispatchHeavyAnimationEvent();
} }
requestAnimationFrame(() => { requestAnimationFrame(() => {
container.classList.add('animating'); container.classList.add('animating');
activateTimeoutRef.current = window.setTimeout(() => { const toNode = childNodes[activeIndex];
function onAnimationEnd() {
requestAnimationFrame(() => { requestAnimationFrame(() => {
container.classList.remove('animating', 'backwards'); container.classList.remove('animating', 'backwards');
@ -191,13 +173,33 @@ const Transition: FC<OwnProps> = ({
} }
} }
if (dispatchHeavyAnimationStop) {
dispatchHeavyAnimationStop();
}
cleanup(); cleanup();
if (onStop) { if (onStop) {
onStop(); onStop();
} }
}); });
}, ANIMATION_DURATION[name] + ANIMATION_END_DELAY); }
function handleAnimationEnd(e: AnimationEvent) {
if (e.target !== e.currentTarget) {
return;
}
toNode.removeEventListener('animationend', handleAnimationEnd as EventListener);
onAnimationEnd();
}
if (animationLevel > 0) {
toNode.addEventListener('animationend', handleAnimationEnd as EventListener);
} else {
onAnimationEnd();
}
if (onStart) { if (onStart) {
onStart(); onStart();