From 37de79a0dc4aca01f39d3370d6d6e94aad37e4a2 Mon Sep 17 00:00:00 2001
From: Abdalrzag Eisa <bmjfdrh@gmail.com>
Date: Fri, 20 Jun 2025 07:04:48 +0300
Subject: [PATCH] add a callback function prop `onTransitionEnd`

---
 src/components/Transition/Transition.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/Transition/Transition.tsx b/src/components/Transition/Transition.tsx
index e12b2a42b..1423de011 100644
--- a/src/components/Transition/Transition.tsx
+++ b/src/components/Transition/Transition.tsx
@@ -5,9 +5,10 @@ type Props = {
     children: JSX.Element,
     when: boolean,
     name: string,
+    onTransitionEnd?: () => void
 };
 
-const Transition = ({ children, when, name }: Props) => {
+const Transition = ({ children, when, name, onTransitionEnd }: Props) => {
     const [element, setElement] = useState<HTMLElement | null>(null);
     const [mounted, setMounted] = useState(false);
 
@@ -29,8 +30,15 @@ const Transition = ({ children, when, name }: Props) => {
         );
     }, [name, state, active, children]);
 
-    const onTransitionEnd = useCallback(() => {
-        state === 'exit' && setMounted(false);
+    const handleTransitionEnd = useCallback(() => {
+        switch (state) {
+            case 'enter':
+                onTransitionEnd?.();
+                break;
+            case 'exit':
+                setMounted(false);
+                break;
+        }
     }, [state]);
 
     useEffect(() => {
@@ -45,8 +53,8 @@ const Transition = ({ children, when, name }: Props) => {
     }, [element]);
 
     useEffect(() => {
-        element?.addEventListener('transitionend', onTransitionEnd);
-        return () => element?.removeEventListener('transitionend', onTransitionEnd);
+        element?.addEventListener('transitionend', handleTransitionEnd);
+        return () => element?.removeEventListener('transitionend', handleTransitionEnd);
     }, [element, onTransitionEnd]);
 
     return (