From f964adac55f0a231c43a14bf583137763d911bbe Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 7 Jul 2021 00:37:33 +0800
Subject: feat: Add full page animation.

---
 FrontEnd/package.json                              |  2 ++
 .../src/views/common/dailog/FullPageDialog.css     | 18 +++++++++++
 .../src/views/common/dailog/FullPageDialog.tsx     | 36 +++++++++++-----------
 3 files changed, 38 insertions(+), 18 deletions(-)

(limited to 'FrontEnd')

diff --git a/FrontEnd/package.json b/FrontEnd/package.json
index 56803ebf..0796ec18 100644
--- a/FrontEnd/package.json
+++ b/FrontEnd/package.json
@@ -28,6 +28,7 @@
     "react-responsive": "^8.2.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
+    "react-transition-group": "^4.4.2",
     "regenerator-runtime": "^0.13.7",
     "remarkable": "^2.0.1",
     "rxjs": "^7.2.0",
@@ -56,6 +57,7 @@
     "@types/react-responsive": "^8.0.2",
     "@types/react-router": "^5.1.15",
     "@types/react-router-dom": "^5.1.7",
+    "@types/react-transition-group": "^4.4.1",
     "@types/remarkable": "^2.0.2",
     "@typescript-eslint/eslint-plugin": "^4.28.2",
     "@typescript-eslint/parser": "^4.28.2",
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")!
   );
-- 
cgit v1.2.3