fix: fadein animation not working on dialog

incluud · Oct 13, 2023 · f8f1acc · f8f1acc
1 parent b89726d
commit f8f1acc
Showing 1 changed file with 15 additions and 6 deletions.
diff --git a/Modal.astro b/Modal.astro
@@ -147,17 +147,11 @@ const { triggerId, title, closeText = 'Close' } = Astro.props
     padding: 0;
   }
 
-  .modal .modal__inner {
-    opacity: 1;
-  }
-
   .modal__inner {
     width: clamp(30ch, 70%, 75ch);
     color: black;
     background-color: white;
     border-radius: 1rem;
-    opacity: 0;
-    transition: opacity 0.3s ease-in-out;
   }
 
   .modal__inner {
@@ -194,4 +188,19 @@ const { triggerId, title, closeText = 'Close' } = Astro.props
     background-color: grey;
     text-decoration: underline;
   }
+
+  /* Animation */
+  dialog[open],
+  dialog[open]::backdrop {
+    animation: fadein 0.3s ease-in-out;
+  }
+
+  @keyframes fadein {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
 </style>