From 735ec47b1e8f15bf98a8cffced1c4deb45b02083 Mon Sep 17 00:00:00 2001
From: fallenbagel <98979876+fallenbagel@users.noreply.github.com>
Date: Mon, 30 Mar 2026 21:34:32 +0800
Subject: [PATCH] fix(login): resolve stuck transition when switching login
 forms (#2779)

---
 src/components/Login/index.tsx | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx
index 60429702..83e130d5 100644
--- a/src/components/Login/index.tsx
+++ b/src/components/Login/index.tsx
@@ -201,24 +201,17 @@ const Login = () => {
                 <CSSTransition
                   key={mediaServerLogin ? 'ms' : 'local'}
                   nodeRef={loginRef}
-                  addEndListener={(done) => {
-                    loginRef.current?.addEventListener(
-                      'transitionend',
-                      done,
-                      false
-                    );
-                  }}
+                  timeout={{ enter: 300, exit: 150 }}
                   onEntered={() => {
                     document
                       .querySelector<HTMLInputElement>('#email, #username')
                       ?.focus();
                   }}
                   classNames={{
-                    appear: 'opacity-0',
-                    appearActive: 'transition-opacity duration-500 opacity-100',
                     enter: 'opacity-0',
-                    enterActive: 'transition-opacity duration-500 opacity-100',
-                    exitActive: 'transition-opacity duration-0 opacity-0',
+                    enterActive: 'transition-opacity duration-300 opacity-100',
+                    exit: 'opacity-100',
+                    exitActive: 'transition-opacity duration-150 opacity-0',
                   }}
                 >
                   <div ref={loginRef} className="button-container">