Add header reveal animations

2026-05-28 22:57:05 +08:00
parent b59fd82006
commit 5ae9647465
3 changed files with 20 additions and 6 deletions
--- a/src/index.css
+++ b/src/index.css
@@ -30,9 +30,23 @@ header button {
  -webkit-tap-highlight-color: transparent;
 }

-.ark-dropdown-enter {
-  --animate-duration: 220ms;
+.ark-header-menu-enter,
+.ark-header-popover-enter {
+  animation: ark-header-menu-enter 180ms ease-out both;
  transform-origin: top center;
+  will-change: clip-path, opacity;
+}
+
+@keyframes ark-header-menu-enter {
+  from {
+    opacity: 0;
+    clip-path: inset(0 0 100% 0);
+  }
+
+  to {
+    opacity: 1;
+    clip-path: inset(0 0 0 0);
+  }
 }

 /* Desktop header nav: thin scrollbar when links overflow (still 單列) */