diff --git a/app/globals.css b/app/globals.css index 371c538..3cea177 100644 --- a/app/globals.css +++ b/app/globals.css @@ -294,3 +294,52 @@ animation: none; mix-blend-mode: normal; } + +/* Dialog animations */ +@keyframes dialog-in { + from { + opacity: 0; + transform: scale(0.96); + } + to { + opacity: 1; + transform: scale(1); + } +} + +@keyframes dialog-out { + from { + opacity: 1; + transform: scale(1); + } + to { + opacity: 0; + transform: scale(0.96); + } +} + +@keyframes overlay-in { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes overlay-out { + from { opacity: 1; } + to { opacity: 0; } +} + +[data-slot="dialog-overlay"][data-state="open"] { + animation: overlay-in 0.2s ease-out; +} + +[data-slot="dialog-overlay"][data-state="closed"] { + animation: overlay-out 0.15s ease-in; +} + +[data-slot="dialog-content"][data-state="open"] { + animation: dialog-in 0.25s cubic-bezier(0.16, 1, 0.3, 1); +} + +[data-slot="dialog-content"][data-state="closed"] { + animation: dialog-out 0.15s ease-in; +} diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx index b9c9b5b..4bf474f 100644 --- a/components/ui/dialog.tsx +++ b/components/ui/dialog.tsx @@ -37,7 +37,7 @@ function DialogOverlay({