Animate modal in

Parlance.ClientApp/src/components/Modal.module.css

@@ -12,6 +12,8 @@
 
     background-color: rgba(0, 0, 0, 0.7);
     z-index: 1000;
+
+    animation: 0.2s ease-out modal-background-in;
 }
 
 
@@ -28,6 +30,8 @@
     max-height: 100vh;
 
     border-radius: var(--border-radius);
+
+    animation: 0.5s cubic-bezier(0, 1, 0, 1) modal-in;
 }
 
 .PopoverContainer {
@@ -161,6 +165,28 @@
     justify-content: center;
 }
 
+@keyframes modal-in {
+    0% {
+        transform: translateY(-50px);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateY(0px);
+        opacity: 1;
+    }
+}
+
+@keyframes modal-background-in {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
 @media (max-width: 600px) {
     .ModalContainer {
         align-self: flex-end;
@@ -171,4 +197,4 @@
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
     }
-}
+}

Parlance.ClientApp/src/components/Modal.tsx

@@ -1,4 +1,4 @@
-import React, {ReactNode} from 'react';
+import React, {ReactNode, useEffect, useState} from 'react';
 import Styles from './Modal.module.css';
 import {createRoot, Root} from "react-dom/client";
 import {WithTranslation, withTranslation} from "react-i18next";
@@ -102,6 +102,20 @@ i18n.on("initialized", setStandardButtons);
 i18n.on("languageChanged", setStandardButtons);
 i18n.on("loaded", setStandardButtons);
 
+function ModalContainer({currentModal}: {
+    currentModal: React.ReactNode
+}) {
+    const [previousModal, setPreviousModal] = useState<ReactNode>(null);
+
+    useEffect(() => {
+        setPreviousModal(currentModal);
+    }, [currentModal]);
+
+    return <div>
+        {previousModal}
+    </div>
+}
+
 let ExportProperty = Modal as ModalExports;
 ExportProperty.mount = (modal) => {
     if (root) ExportProperty.unmount();