Animate sub navigation items (#93)

* Suppress chevron transition when restoring navigation section state on load

Restored open/closed state was animating the section chevron on page
load. Apply a temporary --no-transition modifier while setting the
initial aria-expanded state, then remove it after two animation frames
so the chevron renders in position without animating.

* Document intentional transition-none on collapsed chevron

Author: thomasgallagher

app/assets/tailwind/layered_ui/engine.css

@@ -747,8 +747,16 @@
   mask-size: contain;
 }
 
+/* transition-none is intentional: the after-change style determines the
+   transition, so this gives "animate open, snap shut" - opening matches the
+   base rule (animates), closing matches this rule (snaps instantly). */
 .l-ui-navigation__section-toggle[aria-expanded="false"] .l-ui-navigation__section-chevron {
-  @apply -rotate-90;
+  @apply -rotate-90
+         transition-none;
+}
+
+.l-ui-navigation__section-toggle--no-transition .l-ui-navigation__section-chevron {
+  @apply transition-none;
 }
 
 .l-ui-navigation__section-items {
@@ -771,6 +779,22 @@
          gap-0.5 px-3 py-3;
 }
 
+@keyframes l-ui-navigation-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-0.375rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.l-ui-navigation__section-items--opening > li {
+  animation: l-ui-navigation-slide-down 0.2s ease-out both;
+}
+
 .l-ui-navigation__user {
   @apply shrink-0
          p-4;

app/javascript/layered_ui/controllers/l_ui/navigation_section_controller.js

@@ -21,19 +21,29 @@ export default class extends Controller {
     if (stored === null) return
 
     const isOpen = stored === "true"
-    this.toggleTarget.setAttribute("aria-expanded", isOpen ? "true" : "false")
+    // Apply the restored state without animating the chevron on load; it should
+    // simply render in the correct position.
+    const toggle = this.toggleTarget
+    toggle.classList.add("l-ui-navigation__section-toggle--no-transition")
+    toggle.setAttribute("aria-expanded", isOpen ? "true" : "false")
     if (isOpen) {
       this.panelTarget.removeAttribute("hidden")
     } else {
       this.panelTarget.setAttribute("hidden", "")
     }
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        toggle.classList.remove("l-ui-navigation__section-toggle--no-transition")
+      })
+    })
   }
 
   toggle() {
     const isOpen = this.toggleTarget.getAttribute("aria-expanded") !== "true"
     this.toggleTarget.setAttribute("aria-expanded", isOpen ? "true" : "false")
     if (isOpen) {
       this.panelTarget.removeAttribute("hidden")
+      this.#animateOpen()
     } else {
       this.panelTarget.setAttribute("hidden", "")
     }
@@ -45,4 +55,14 @@ export default class extends Controller {
       // ignore
     }
   }
+
+  // Slide the items in only on user-initiated open, not on initial page load.
+  #animateOpen() {
+    const panel = this.panelTarget
+    const CLASS = "l-ui-navigation__section-items--opening"
+    panel.classList.add(CLASS)
+    panel.addEventListener("animationend", () => {
+      panel.classList.remove(CLASS)
+    }, { once: true })
+  }
 }