Add effect to modal component

src/components/Backdrop/backdrop.css

@@ -1,4 +1,6 @@
-.backdrop[aria-expanded] {
+.backdrop {
+  opacity: 0;
+  transition: opacity 0.25s;
   height: 100%;
   width: 100%;
   position: fixed;
@@ -7,7 +9,12 @@
   background: var(--codex-background-backdrop);
   backdrop-filter: blur(2px);
   display: block;
+  z-index: -1;
+}
+
+.backdrop[aria-expanded] {
   z-index: 10;
+  opacity: 1;
 }
 
 .document-noOverflow {

src/components/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import { Backdrop } from "../Backdrop/Backdrop";
 import { Button } from "../Button/Button";
 import { classnames } from "../utils/classnames";
@@ -67,11 +67,28 @@ export function Modal({
   children,
   onAction,
 }: Props) {
+  const [internalOpen, setInternalOpen] = useState(open);
+
+  useEffect(() => {
+    setInternalOpen(open);
+  }, [open]);
+
+  const internalClose = () => {
+    setInternalOpen(false);
+    setTimeout(onClose, 250);
+  };
+
   return (
     <>
-      <Backdrop open={open} onClose={onClose} />
+      <Backdrop open={internalOpen} onClose={internalClose} />
 
-      <div className={classnames(["modal"], ["modal--open", open])}>
+      <div
+        className={classnames(
+          ["modal"],
+          ["modal--internalOpen", internalOpen],
+          ["modal--open", open]
+        )}
+      >
         <div className="modal-body">{open && children}</div>
 
         <div
@@ -84,7 +101,7 @@ export function Modal({
             <Button
               label={labelCloseButton}
               variant="outline"
-              onClick={onClose}
+              onClick={internalClose}
               disabled={disableCloseButton}
             />
           )}

src/components/Modal/modal.css

@@ -1,5 +1,7 @@
 .modal {
-  transition: transform 0.15s;
+  transition:
+    transform 0.25s,
+    opacity 0.25s;
   max-width: 800px;
   overflow-y: auto;
   overflow-x: hidden;
@@ -8,7 +10,7 @@
   max-height: 100%;
   left: 50%;
   top: 50%;
-  transform: translate(-50%, -50%) scale(0);
+  transform: translateX(-50%);
   position: fixed;
   display: flex;
   flex-direction: column;
@@ -17,12 +19,12 @@
   border-radius: var(--codex-border-radius);
 }
 
-.modal--open {
-  transform: translate(-50%, -50%) scale(1);
+.modal--internalOpen {
+  transform: translate(-50%, -50%);
+  opacity: 1;
 }
 
 .modal--open {
-  opacity: 1;
   z-index: 10;
 }