[Perf] Transition: Avoid wildcard selector

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%;

src/components/left/settings/Settings.scss

@@ -3,7 +3,7 @@
 #Settings {
   height: 100%;
 
-  > div {
+  > .Transition__slide {
     display: flex;
     flex-direction: column;
     overflow: hidden;

src/components/middle/MessageList.scss

@@ -452,7 +452,7 @@
     }
   }
 
-  .animating > div > & {
+  .Transition.animating > .Transition__slide > & {
     &::-webkit-scrollbar {
       width: 0;
     }

src/components/middle/MiddleColumn.scss

@@ -26,7 +26,7 @@
       height: 100%;
       overflow: hidden;
 
-      > div {
+      > .Transition__slide {
         display: flex;
         flex-direction: column;
         align-items: center;

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%;

src/components/right/RightHeader.scss

@@ -17,7 +17,7 @@
     flex: 1;
     height: 100%;
 
-    > div {
+    > .Transition__slide {
       display: flex;
       align-items: center;
     }

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);
     }
 

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<TransitionProps> = ({
     }
 
     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)';

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;
   }
 }

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;