feat: add animation on dialog

tblivet · Dec 2, 2024 · 85c6469 · 85c6469
1 parent a17b173
commit 85c6469
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 6 deletions.
diff --git a/_dev/src/scss/_mixins.scss b/_dev/src/scss/_mixins.scss
@@ -63,3 +63,51 @@
     width: 0%;
   }
 }
+
+@keyframes backdrop-show {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes backdrop-hide {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes dialog-show {
+  from {
+    opacity: 0.5;
+    transform: translateY(-2rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes dialog-hide {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(2rem);
+  }
+}
diff --git a/_dev/src/scss/components/_dialog.scss b/_dev/src/scss/components/_dialog.scss
@@ -2,20 +2,32 @@
 
 $e: ".dialog";
 
-@at-root {
-  ::backdrop {
-    background-color: rgb(0 0 0 / 0.5);
-  }
-}
-
 #{$ua-id} {
   #{$e} {
+    --#{$ua-prefix}dialog-animation-duration: 0.25s;
     width: 508px;
     max-width: calc(100% - 2rem);
     padding: 0;
     border: none;
     border-radius: var(--#{$ua-prefix}border-radius);
     box-shadow: var(--#{$ua-prefix}box-shadow-dialog);
+    transition:
+      display var(--#{$ua-prefix}dialog-animation-duration) ease-out allow-discrete,
+      overlay var(--#{$ua-prefix}dialog-animation-duration) ease-out allow-discrete;
+    animation: dialog-hide var(--#{$ua-prefix}dialog-animation-duration) ease-out forwards;
+
+    &::backdrop {
+      background-color: rgb(0 0 0 / 0.5);
+      animation: backdrop-hide var(--#{$ua-prefix}dialog-animation-duration) ease-out forwards;
+    }
+
+    &[open] {
+      animation: dialog-show var(--#{$ua-prefix}dialog-animation-duration) ease-out forwards;
+
+      &::backdrop {
+        animation: backdrop-show var(--#{$ua-prefix}dialog-animation-duration) ease-out forwards;
+      }
+    }
 
     &__content {
       display: flex;