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

Transition: Fix turning off slide-optimized transition

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-12-31 18:17:41 +01:00
parent af289a81f5
commit 7639e2cac7
1 changed files with 38 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,9 @@ import React, {
FC, useLayoutEffect, useRef, FC, useLayoutEffect, useRef,
} from '../../lib/teact/teact'; } from '../../lib/teact/teact';
import { getGlobal } from '../../lib/teact/teactn'; import { getGlobal } from '../../lib/teact/teactn';
import { GlobalState } from '../../global/types';
import { ANIMATION_LEVEL_MIN } from '../../config';
import buildClassName from '../../util/buildClassName'; import buildClassName from '../../util/buildClassName';
import forceReflow from '../../util/forceReflow'; import forceReflow from '../../util/forceReflow';
import { waitForAnimationEnd, waitForTransitionEnd } from '../../util/cssAnimationEndListeners'; import { waitForAnimationEnd, waitForTransitionEnd } from '../../util/cssAnimationEndListeners';
@ -121,6 +123,7 @@ const Transition: FC<TransitionProps> = ({
if (name === 'slide-optimized' || name === 'slide-optimized-rtl') { if (name === 'slide-optimized' || name === 'slide-optimized-rtl') {
performSlideOptimized( performSlideOptimized(
animationLevel,
name, name,
isBackwards, isBackwards,
cleanup, cleanup,
@ -140,7 +143,7 @@ const Transition: FC<TransitionProps> = ({
container.classList.remove('animating'); container.classList.remove('animating');
container.classList.toggle('backwards', isBackwards); container.classList.toggle('backwards', isBackwards);
if (name === 'none' || animationLevel === 0) { if (name === 'none' || animationLevel === ANIMATION_LEVEL_MIN) {
childNodes.forEach((node, i) => { childNodes.forEach((node, i) => {
if (node instanceof HTMLElement) { if (node instanceof HTMLElement) {
node.classList.remove('from', 'through', 'to'); node.classList.remove('from', 'through', 'to');
@ -271,6 +274,7 @@ const Transition: FC<TransitionProps> = ({
export default Transition; export default Transition;
function performSlideOptimized( function performSlideOptimized(
animationLevel: GlobalState['settings']['byKey']['animationLevel'],
name: 'slide-optimized' | 'slide-optimized-rtl', name: 'slide-optimized' | 'slide-optimized-rtl',
isBackwards: boolean, isBackwards: boolean,
cleanup: NoneToVoidFunction, cleanup: NoneToVoidFunction,
@ -280,10 +284,24 @@ function performSlideOptimized(
shouldRestoreHeight?: boolean, shouldRestoreHeight?: boolean,
onStart?: NoneToVoidFunction, onStart?: NoneToVoidFunction,
onStop?: NoneToVoidFunction, onStop?: NoneToVoidFunction,
currentSlide?: HTMLElement, toSlide?: HTMLElement,
prevSlide?: HTMLElement, fromSlide?: HTMLElement,
) { ) {
if (!prevSlide || !currentSlide) { if (!fromSlide || !toSlide) {
return;
}
if (animationLevel === ANIMATION_LEVEL_MIN) {
fromSlide.style.transition = 'none';
fromSlide.style.transform = '';
fromSlide.classList.remove(classNames.active);
toSlide.style.transition = 'none';
toSlide.style.transform = 'translate3d(0, 0, 0)';
toSlide.classList.add(classNames.active);
cleanup();
return; return;
} }
@ -296,34 +314,34 @@ function performSlideOptimized(
requestAnimationFrame(() => { requestAnimationFrame(() => {
onStart?.(); onStart?.();
prevSlide.style.transition = 'none'; fromSlide.style.transition = 'none';
prevSlide.style.transform = 'translate3d(0, 0, 0)'; fromSlide.style.transform = 'translate3d(0, 0, 0)';
currentSlide.style.transition = 'none'; toSlide.style.transition = 'none';
currentSlide.style.transform = `translate3d(${isBackwards ? '-' : ''}100%, 0, 0)`; toSlide.style.transform = `translate3d(${isBackwards ? '-' : ''}100%, 0, 0)`;
forceReflow(currentSlide); forceReflow(toSlide);
prevSlide.style.transition = ''; fromSlide.style.transition = '';
prevSlide.style.transform = `translate3d(${isBackwards ? '' : '-'}100%, 0, 0)`; fromSlide.style.transform = `translate3d(${isBackwards ? '' : '-'}100%, 0, 0)`;
currentSlide.style.transition = ''; toSlide.style.transition = '';
currentSlide.style.transform = 'translate3d(0, 0, 0)'; toSlide.style.transform = 'translate3d(0, 0, 0)';
prevSlide.classList.remove(classNames.active); fromSlide.classList.remove(classNames.active);
currentSlide.classList.add(classNames.active); toSlide.classList.add(classNames.active);
waitForTransitionEnd(prevSlide, () => { waitForTransitionEnd(fromSlide, () => {
if (activeKey !== currentKeyRef.current) { if (activeKey !== currentKeyRef.current) {
return; return;
} }
prevSlide.style.transition = 'none'; fromSlide.style.transition = 'none';
prevSlide.style.transform = ''; fromSlide.style.transform = '';
if (shouldRestoreHeight) { if (shouldRestoreHeight) {
currentSlide.style.height = 'auto'; toSlide.style.height = 'auto';
container.style.height = `${currentSlide.clientHeight}px`; container.style.height = `${toSlide.clientHeight}px`;
} }
onStop?.(); onStop?.();