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

Avatar: Fix missing opacity animation (#2818)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-03-19 22:31:24 -05:00
parent 21678cfd51
commit b44a1396db
2 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/main/Main.tsx
View File

@ -347,7 +347,7 @@ const Main: FC<OwnProps & StateProps> = ({
}, [lastSyncTime, openChat]); }, [lastSyncTime, openChat]);
const leftColumnTransition = useShowTransition( const leftColumnTransition = useShowTransition(
isLeftColumnOpen, undefined, true, undefined, shouldSkipHistoryAnimations, isLeftColumnOpen, undefined, true, undefined, shouldSkipHistoryAnimations, undefined, true,
); );
const willAnimateLeftColumnRef = useRef(false); const willAnimateLeftColumnRef = useRef(false);
const forceUpdate = useForceUpdate(); const forceUpdate = useForceUpdate();
@ -376,7 +376,7 @@ const Main: FC<OwnProps & StateProps> = ({
}, [animationLevel, forceUpdate, isLeftColumnOpen]); }, [animationLevel, forceUpdate, isLeftColumnOpen]);
const rightColumnTransition = useShowTransition( const rightColumnTransition = useShowTransition(
isRightColumnOpen, undefined, true, undefined, shouldSkipHistoryAnimations, isRightColumnOpen, undefined, true, undefined, shouldSkipHistoryAnimations, undefined, true,
); );
const willAnimateRightColumnRef = useRef(false); const willAnimateRightColumnRef = useRef(false);
const [isNarrowMessageList, setIsNarrowMessageList] = useState(isRightColumnOpen); const [isNarrowMessageList, setIsNarrowMessageList] = useState(isRightColumnOpen);

5
src/hooks/useShowTransition.ts
View File

@ -6,15 +6,16 @@ const CLOSE_DURATION = 350;
const useShowTransition = ( const useShowTransition = (
isOpen = false, isOpen = false,
onCloseTransitionEnd?: () => void, onCloseTransitionEnd?: () => void,
noOpenTransition = false, noFirstOpenTransition = false,
className: string | false = 'fast', className: string | false = 'fast',
noCloseTransition = false, noCloseTransition = false,
closeDuration = CLOSE_DURATION, closeDuration = CLOSE_DURATION,
noOpenTransition = false,
) => { ) => {
const [isClosed, setIsClosed] = useState(!isOpen); const [isClosed, setIsClosed] = useState(!isOpen);
const closeTimeoutRef = useRef<number>(); const closeTimeoutRef = useRef<number>();
// СSS class should be added in a separate tick to turn on CSS transition. // СSS class should be added in a separate tick to turn on CSS transition.
const [hasOpenClassName, setHasOpenClassName] = useState(isOpen && noOpenTransition); const [hasOpenClassName, setHasOpenClassName] = useState(isOpen && noFirstOpenTransition);
if (isOpen) { if (isOpen) {
setIsClosed(false); setIsClosed(false);