Auth: Screen transitions

src/components/auth/Auth.scss

@@ -1,3 +1,7 @@
+.Auth {
+  height: 100%;
+}
+
 .auth-form {
   width: 100%;
   max-width: 25.5rem;

src/components/auth/Auth.tsx

@@ -11,6 +11,7 @@ import windowSize from '../../util/windowSize';
 import useHistoryBack from '../../hooks/useHistoryBack';
 import useCurrentOrPrev from '../../hooks/useCurrentOrPrev';
 
+import Transition from '../ui/Transition';
 import AuthPhoneNumber from './AuthPhoneNumber';
 import AuthCode from './AuthCode.async';
 import AuthPassword from './AuthPassword.async';
@@ -51,7 +52,7 @@ const Auth: FC<OwnProps & StateProps> = ({
 
   useHistoryBack({
     isActive: (!isMobile && authState === 'authorizationStateWaitPhoneNumber')
-    || (isMobile && authState === 'authorizationStateWaitQrCode'),
+      || (isMobile && authState === 'authorizationStateWaitQrCode'),
     onBack: handleChangeAuthorizationMethod,
   });
 
@@ -70,20 +71,45 @@ const Auth: FC<OwnProps & StateProps> = ({
     true,
   );
 
-  switch (renderingAuthState) {
+  function getScreen() {
-    case 'authorizationStateWaitCode':
+    switch (renderingAuthState) {
-      return <AuthCode />;
+      case 'authorizationStateWaitCode':
-    case 'authorizationStateWaitPassword':
+        return <AuthCode />;
-      return <AuthPassword />;
+      case 'authorizationStateWaitPassword':
-    case 'authorizationStateWaitRegistration':
+        return <AuthPassword />;
-      return <AuthRegister />;
+      case 'authorizationStateWaitRegistration':
-    case 'authorizationStateWaitPhoneNumber':
+        return <AuthRegister />;
-      return <AuthPhoneNumber />;
+      case 'authorizationStateWaitPhoneNumber':
-    case 'authorizationStateWaitQrCode':
+        return <AuthPhoneNumber />;
-      return <AuthQrCode />;
+      case 'authorizationStateWaitQrCode':
-    default:
+        return <AuthQrCode />;
-      return isMobile ? <AuthPhoneNumber /> : <AuthQrCode />;
+      default:
+        return isMobile ? <AuthPhoneNumber /> : <AuthQrCode />;
+    }
   }
+
+  function getActiveKey() {
+    switch (renderingAuthState) {
+      case 'authorizationStateWaitCode':
+        return 0;
+      case 'authorizationStateWaitPassword':
+        return 1;
+      case 'authorizationStateWaitRegistration':
+        return 2;
+      case 'authorizationStateWaitPhoneNumber':
+        return 3;
+      case 'authorizationStateWaitQrCode':
+        return 4;
+      default:
+        return isMobile ? 3 : 4;
+    }
+  }
+
+  return (
+    <Transition activeKey={getActiveKey()} name="fade" className="Auth">
+      {getScreen()}
+    </Transition>
+  );
 };
 
 export default memo(withGlobal<OwnProps>(