From ac1033b673e7c8a35117d93f43b95a403308e8c6 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Sat, 15 Apr 2023 13:50:20 +0200 Subject: [PATCH] [Perf] Transition: Avoid wildcard selector --- src/components/left/ConnectionStatusOverlay.scss | 2 +- src/components/left/settings/Settings.scss | 2 +- src/components/middle/MessageList.scss | 2 +- src/components/middle/MiddleColumn.scss | 2 +- src/components/middle/MiddleHeader.scss | 2 +- src/components/right/RightHeader.scss | 2 +- src/components/ui/Transition.scss | 11 +++++------ src/components/ui/Transition.tsx | 11 ++++++++--- src/styles/_mixins.scss | 2 +- src/styles/print.scss | 2 +- 10 files changed, 21 insertions(+), 17 deletions(-) diff --git a/src/components/left/ConnectionStatusOverlay.scss b/src/components/left/ConnectionStatusOverlay.scss index 6c7baf574..62db6c3a1 100644 --- a/src/components/left/ConnectionStatusOverlay.scss +++ b/src/components/left/ConnectionStatusOverlay.scss @@ -57,7 +57,7 @@ // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size min-width: 0; - > div { + > .Transition__slide { display: flex; align-items: center; width: 100%; diff --git a/src/components/left/settings/Settings.scss b/src/components/left/settings/Settings.scss index 15f540954..55e49c581 100644 --- a/src/components/left/settings/Settings.scss +++ b/src/components/left/settings/Settings.scss @@ -3,7 +3,7 @@ #Settings { height: 100%; - > div { + > .Transition__slide { display: flex; flex-direction: column; overflow: hidden; diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss index fdf95d564..2589cfc14 100644 --- a/src/components/middle/MessageList.scss +++ b/src/components/middle/MessageList.scss @@ -452,7 +452,7 @@ } } - .animating > div > & { + .Transition.animating > .Transition__slide > & { &::-webkit-scrollbar { width: 0; } diff --git a/src/components/middle/MiddleColumn.scss b/src/components/middle/MiddleColumn.scss index f4dadbbfb..3ae7da38d 100644 --- a/src/components/middle/MiddleColumn.scss +++ b/src/components/middle/MiddleColumn.scss @@ -26,7 +26,7 @@ height: 100%; overflow: hidden; - > div { + > .Transition__slide { display: flex; flex-direction: column; align-items: center; diff --git a/src/components/middle/MiddleHeader.scss b/src/components/middle/MiddleHeader.scss index 9d9dcb00e..f23e93930 100644 --- a/src/components/middle/MiddleHeader.scss +++ b/src/components/middle/MiddleHeader.scss @@ -60,7 +60,7 @@ // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size min-width: 0; - > div { + > .Transition__slide { display: flex; align-items: center; width: 100%; diff --git a/src/components/right/RightHeader.scss b/src/components/right/RightHeader.scss index 0e7e19a9e..73408b9d2 100644 --- a/src/components/right/RightHeader.scss +++ b/src/components/right/RightHeader.scss @@ -17,7 +17,7 @@ flex: 1; height: 100%; - > div { + > .Transition__slide { display: flex; align-items: center; } diff --git a/src/components/ui/Transition.scss b/src/components/ui/Transition.scss index d45c6ee1d..2e5b48ed1 100644 --- a/src/components/ui/Transition.scss +++ b/src/components/ui/Transition.scss @@ -1,11 +1,10 @@ .Transition { position: relative; - > * { + > .Transition__slide { width: 100%; height: 100%; animation-fill-mode: forwards !important; - transition: background-color 0.2s; &.from, &.to { @@ -35,7 +34,7 @@ transform: translate3d(0, 0, 0); } - #root & > div { + #root & > .Transition__slide { position: absolute; display: block !important; top: 0; @@ -186,7 +185,7 @@ */ &.mv-slide { - > * > div { + > .Transition__slide > div { animation-fill-mode: forwards !important; } @@ -351,7 +350,7 @@ --background-color: var(--color-background); background: black; - > div { + > .Transition__slide { background: var(--background-color); } @@ -392,7 +391,7 @@ */ &.push-slide { - > div { + > .Transition__slide { background: var(--color-background); } diff --git a/src/components/ui/Transition.tsx b/src/components/ui/Transition.tsx index dde5bff05..e8da4a84d 100644 --- a/src/components/ui/Transition.tsx +++ b/src/components/ui/Transition.tsx @@ -3,7 +3,6 @@ import type { FC } from '../../lib/teact/teact'; import React, { useLayoutEffect, useRef } from '../../lib/teact/teact'; import { addExtraClass, removeExtraClass, toggleExtraClass } from '../../lib/teact/teact-dom'; import { getGlobal } from '../../global'; - import type { GlobalState } from '../../global/types'; import { ANIMATION_LEVEL_MIN } from '../../config'; @@ -40,6 +39,7 @@ export type TransitionProps = { const FALLBACK_ANIMATION_END = 1000; const CLASSES = { + slide: 'Transition__slide', active: 'Transition__slide--active', }; @@ -94,10 +94,15 @@ const Transition: FC = ({ } const container = containerRef.current!; - const childElements = container.children; + const childElements = Array.from(container.children) as HTMLElement[]; + + childElements.forEach((el) => { + addExtraClass(el, CLASSES.slide); + }); if (childElements.length === 1 && !activeKeyChanged) { - const firstChild = childElements[0] as HTMLElement; + const firstChild = childElements[0]; + if (name.startsWith('slide-optimized')) { firstChild.style.transition = 'none'; firstChild.style.transform = 'translate3d(0, 0, 0)'; diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 4f629bed9..e6e8b3420 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -1,6 +1,6 @@ // @optimization @mixin while-transition() { - .Transition > div:not(.Transition__slide--active) & { + .Transition__slide:not(.Transition__slide--active) & { @content; } } diff --git a/src/styles/print.scss b/src/styles/print.scss index c9414c3be..67938c228 100644 --- a/src/styles/print.scss +++ b/src/styles/print.scss @@ -32,7 +32,7 @@ .MessageList, .messages-layout, .Transition, - .Transition > * { + .Transition > .Transition__slide { height: auto !important; overflow: visible !important; display: block !important;