website_next: part 5

website_next/dialog/index.js

@@ -1,3 +1,5 @@
+import { waitForTransition } from "../utils/transition.js";
+
 /** @param {MouseEvent} event */
 function closeOnBackdrop(event) {
   const dialog = /** @type {HTMLDialogElement} */ (event.currentTarget);
@@ -11,7 +13,10 @@ function closeOnBackdrop(event) {
  */
 export function openDialog(dialog, host) {
   host.append(dialog);
-  dialog.addEventListener("close", () => dialog.remove(), { once: true });
+  dialog.addEventListener("close", async () => {
+    await waitForTransition();
+    dialog.remove();
+  }, { once: true });
   dialog.addEventListener("click", closeOnBackdrop);
   dialog.showModal();
 }

website_next/dialog/style.css

@@ -8,8 +8,40 @@ dialog {
   padding: var(--dialog-space);
   color: var(--black);
   background: var(--white);
+  opacity: 0;
+  translate: 0 0.5rem;
+  transition:
+    opacity var(--transition-duration) ease,
+    translate var(--transition-duration) ease,
+    display var(--transition-duration) allow-discrete,
+    overlay var(--transition-duration) allow-discrete;
+
+  &:open {
+    opacity: 1;
+    translate: 0;
+  }
 
   &::backdrop {
     background: color-mix(in oklch, var(--black) 72%, transparent);
+    opacity: 0;
+    transition:
+      opacity var(--transition-duration) ease,
+      display var(--transition-duration) allow-discrete,
+      overlay var(--transition-duration) allow-discrete;
+  }
+
+  &:open::backdrop {
+    opacity: 1;
+  }
+
+  @starting-style {
+    &:open {
+      opacity: 0;
+      translate: 0 0.5rem;
+    }
+
+    &:open::backdrop {
+      opacity: 0;
+    }
   }
 }