Transition: Fix unmounting active slide

src/components/App.tsx

@@ -42,8 +42,8 @@ type StateProps = {
 
 enum AppScreens {
   auth,
-  lock,
   main,
+  lock,
   inactive,
 }
 

src/components/ui/Transition.tsx

@@ -175,11 +175,11 @@ function Transition({
         activeKey,
         currentKeyRef,
         container,
+        childNodes[activeIndex],
+        childNodes[prevActiveIndex],
         shouldRestoreHeight,
         onStart,
         onStop,
-        childNodes[activeIndex] as HTMLElement,
-        childNodes[prevActiveIndex] as HTMLElement,
       );
 
       return;
@@ -347,27 +347,27 @@ function performSlideOptimized(
   activeKey: number,
   currentKeyRef: { current: number | undefined },
   container: HTMLElement,
+  toSlide: ChildNode,
+  fromSlide?: ChildNode,
   shouldRestoreHeight?: boolean,
   onStart?: NoneToVoidFunction,
   onStop?: NoneToVoidFunction,
-  toSlide?: HTMLElement,
-  fromSlide?: HTMLElement,
 ) {
-  if (!fromSlide || !toSlide) {
-    return;
-  }
-
   if (shouldDisableAnimation) {
     toggleExtraClass(container, `Transition-${name}`, !isBackwards);
     toggleExtraClass(container, `Transition-${name}Backwards`, isBackwards);
 
-    fromSlide.style.transition = 'none';
+    if (fromSlide instanceof HTMLElement) {
-    fromSlide.style.transform = '';
+      fromSlide.style.transition = 'none';
-    removeExtraClass(fromSlide, CLASSES.active);
+      fromSlide.style.transform = '';
+      removeExtraClass(fromSlide, CLASSES.active);
+    }
 
-    toSlide.style.transition = 'none';
+    if (toSlide instanceof HTMLElement) {
-    toSlide.style.transform = 'translate3d(0, 0, 0)';
+      toSlide.style.transition = 'none';
-    addExtraClass(toSlide, CLASSES.active);
+      toSlide.style.transform = 'translate3d(0, 0, 0)';
+      addExtraClass(toSlide, CLASSES.active);
+    }
 
     cleanup();
 
@@ -385,39 +385,50 @@ function performSlideOptimized(
   toggleExtraClass(container, `Transition-${name}`, !isBackwards);
   toggleExtraClass(container, `Transition-${name}Backwards`, isBackwards);
 
-  fromSlide.style.transition = 'none';
+  if (fromSlide instanceof HTMLElement) {
-  fromSlide.style.transform = 'translate3d(0, 0, 0)';
+    fromSlide.style.transition = 'none';
+    fromSlide.style.transform = 'translate3d(0, 0, 0)';
+  }
 
-  toSlide.style.transition = 'none';
+  if (toSlide instanceof HTMLElement) {
-  toSlide.style.transform = `translate3d(${isBackwards ? '-' : ''}100%, 0, 0)`;
+    toSlide.style.transition = 'none';
+    toSlide.style.transform = `translate3d(${isBackwards ? '-' : ''}100%, 0, 0)`;
+  }
 
   requestForcedReflow(() => {
-    forceReflow(toSlide);
+    if (toSlide instanceof HTMLElement) {
+      forceReflow(toSlide);
+    }
 
     return () => {
-      fromSlide.style.transition = '';
+      if (fromSlide instanceof HTMLElement) {
-      fromSlide.style.transform = `translate3d(${isBackwards ? '' : '-'}100%, 0, 0)`;
+        fromSlide.style.transition = '';
+        fromSlide.style.transform = `translate3d(${isBackwards ? '' : '-'}100%, 0, 0)`;
+        removeExtraClass(fromSlide, CLASSES.active);
+      }
 
-      toSlide.style.transition = '';
+      if (toSlide instanceof HTMLElement) {
-      toSlide.style.transform = 'translate3d(0, 0, 0)';
+        toSlide.style.transition = '';
-
+        toSlide.style.transform = 'translate3d(0, 0, 0)';
-      removeExtraClass(fromSlide, CLASSES.active);
+        addExtraClass(toSlide, CLASSES.active);
-      addExtraClass(toSlide, CLASSES.active);
+      }
     };
   });
 
-  waitForTransitionEnd(fromSlide, () => {
+  waitForTransitionEnd(toSlide, () => {
-    const { clientHeight } = toSlide;
+    const clientHeight = toSlide instanceof HTMLElement ? toSlide.clientHeight : undefined;
 
     requestMutation(() => {
       if (activeKey !== currentKeyRef.current) {
         return;
       }
 
-      fromSlide.style.transition = 'none';
+      if (fromSlide instanceof HTMLElement) {
-      fromSlide.style.transform = '';
+        fromSlide.style.transition = 'none';
+        fromSlide.style.transform = '';
+      }
 
-      if (shouldRestoreHeight) {
+      if (shouldRestoreHeight && clientHeight && toSlide instanceof HTMLElement) {
         toSlide.style.height = 'auto';
         container.style.height = `${clientHeight}px`;
       }

src/lib/teact/teact-dom.ts

@@ -710,7 +710,7 @@ function updateClassName(element: HTMLElement, value: string) {
 export function addExtraClass(element: Element, className: string, forceSingle = false) {
   if (!forceSingle) {
     const classNames = className.split(' ');
-    if (className.length > 1) {
+    if (classNames.length > 1) {
       classNames.forEach((cn) => {
         addExtraClass(element, cn, true);
       });
@@ -732,7 +732,7 @@ export function addExtraClass(element: Element, className: string, forceSingle =
 export function removeExtraClass(element: Element, className: string, forceSingle = false) {
   if (!forceSingle) {
     const classNames = className.split(' ');
-    if (className.length > 1) {
+    if (classNames.length > 1) {
       classNames.forEach((cn) => {
         removeExtraClass(element, cn, true);
       });
@@ -756,7 +756,7 @@ export function removeExtraClass(element: Element, className: string, forceSingl
 export function toggleExtraClass(element: Element, className: string, force?: boolean, forceSingle = false) {
   if (!forceSingle) {
     const classNames = className.split(' ');
-    if (className.length > 1) {
+    if (classNames.length > 1) {
       classNames.forEach((cn) => {
         toggleExtraClass(element, cn, force, true);
       });