diff options
| -rw-r--r-- | FrontEnd/package.json | 2 | ||||
| -rw-r--r-- | FrontEnd/src/views/common/dailog/FullPageDialog.css | 18 | ||||
| -rw-r--r-- | FrontEnd/src/views/common/dailog/FullPageDialog.tsx | 36 |
3 files changed, 38 insertions, 18 deletions
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")! ); |