feat: Add full page animation.

1 files changed, 18 insertions, 18 deletions

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")!
   );