2 files changed, 36 insertions, 18 deletions
diff --git a/FrontEnd/src/views/common/dailog/FullPageDialog.css b/FrontEnd/src/views/common/dailog/FullPageDialog.css
index a196981c..fd125a5a 100644
--- a/FrontEnd/src/views/common/dailog/FullPageDialog.css
+++ b/FrontEnd/src/views/common/dailog/FullPageDialog.css
@@ -28,3 +28,21 @@
 .cru-full-page-back-button {
   color: var(--cru-primary-t-color);
 }
+
+.cru-full-page-enter {
+  transform: translate(100%, 0);
+}
+
+.cru-full-page-enter-active {
+  transform: none;
+  transition: transform 0.3s;
+}
+
+.cru-full-page-exit-active {
+  transition: transform 0.3s;
+  transform: translate(100%, 0);
+}
+
+.cru-full-page-exit-done {
+  display: none;
+}
diff --git a/FrontEnd/src/views/common/dailog/FullPageDialog.tsx b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
index 2e77dbb0..2aff9f2e 100644
--- a/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
+++ b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { createPortal } from "react-dom";
 import classnames from "classnames";
+import { CSSTransition } from "react-transition-group";
 
 import "./FullPageDialog.css";
 
@@ -17,25 +18,24 @@ const FullPageDialog: React.FC<FullPageDialogProps> = ({
   contentContainerClassName,
 }) => {
   return createPortal(
-    <div
-      className="cru-full-page"
-      style={{ display: show ? undefined : "none" }}
-    >
-      <div className="cru-full-page-top-bar">
-        <i
-          className="icon-button bi-arrow-left ms-3 cru-full-page-back-button"
-          onClick={onBack}
-        />
+    <CSSTransition in={show} timeout={300} classNames="cru-full-page">
+      <div className="cru-full-page">
+        <div className="cru-full-page-top-bar">
+          <i
+            className="icon-button bi-arrow-left ms-3 cru-full-page-back-button"
+            onClick={onBack}
+          />
+        </div>
+        <div
+          className={classnames(
+            "cru-full-page-content-container",
+            contentContainerClassName
+          )}
+        >
+          {children}
+        </div>
       </div>
-      <div
-        className={classnames(
-          "cru-full-page-content-container",
-          contentContainerClassName
-        )}
-      >
-        {children}
-      </div>
-    </div>,
+    </CSSTransition>,
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     document.getElementById("portal")!
   );