Improve confirm modal animation

felixmosh · Jul 28, 2022 · 732117e · 732117e
1 parent 2e3c432
commit 732117e
Showing 1 changed file with 32 additions and 4 deletions.
diff --git a/packages/ui/src/components/ConfirmModal/ConfirmModal.module.css b/packages/ui/src/components/ConfirmModal/ConfirmModal.module.css
@@ -16,14 +16,42 @@
   }
 }
 
-.overlay[data-state='open'],
-.contentWrapper[data-state='open'] {
+@keyframes slideUp {
+  from {
+    transform: translateY(16px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideDown {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(16px);
+    opacity: 0;
+  }
+}
+
+.overlay[data-state='open'] {
   animation: fadeIn 150ms ease-out;
 }
 
-.overlay[data-state='closed'],
+.overlay[data-state='closed'] {
+  animation: fadeOut 150ms ease-in 150ms;
+}
+
+.contentWrapper[data-state='open'] {
+  animation: slideUp 150ms ease-out;
+}
+
 .contentWrapper[data-state='closed'] {
-  animation: fadeOut 150ms ease-in;
+  animation: slideDown 150ms ease-in;
 }
 
 .overlay {