style: menu animations (#2401)

packages/web/src/javascripts/Hooks/useLifecycleAnimation.ts

@@ -4,9 +4,9 @@ import { useStateRef } from './useStateRef'
 
 type Options = {
   open: boolean
-  enter: AnimationConfig
+  enter?: AnimationConfig
   enterCallback?: (element: HTMLElement) => void
-  exit: AnimationConfig
+  exit?: AnimationConfig
   exitCallback?: (element: HTMLElement) => void
 }
 
@@ -52,37 +52,53 @@ export const useLifecycleAnimation = (
 
     const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
 
-    if (prefersReducedMotion) {
-      setIsMounted(open)
-      return
-    }
-
     const enter = enterRef.current
     const enterCallback = enterCallbackRef.current
     const exit = exitRef.current
     const exitCallback = exitCallbackRef.current
 
+    if (prefersReducedMotion && !enter?.reducedMotionKeyframes && !exit?.reducedMotionKeyframes) {
+      setIsMounted(open)
+      return
+    }
+
     if (open) {
+      if (!enter) {
+        setIsMounted(true)
+        enterCallback?.(element)
+        return
+      }
       if (enter.initialStyle) {
         Object.assign(element.style, enter.initialStyle)
       }
-      const animation = element.animate(enter.keyframes, {
-        ...enter.options,
-        fill: 'forwards',
-      })
+      const animation = element.animate(
+        prefersReducedMotion && enter.reducedMotionKeyframes ? enter.reducedMotionKeyframes : enter.keyframes,
+        {
+          ...enter.options,
+          fill: 'forwards',
+        },
+      )
       animation.finished
         .then(() => {
           enterCallback?.(element)
         })
         .catch(console.error)
     } else {
+      if (!exit) {
+        setIsMounted(false)
+        exitCallback?.(element)
+        return
+      }
       if (exit.initialStyle) {
         Object.assign(element.style, exit.initialStyle)
       }
-      const animation = element.animate(exit.keyframes, {
-        ...exit.options,
-        fill: 'forwards',
-      })
+      const animation = element.animate(
+        prefersReducedMotion && exit.reducedMotionKeyframes ? exit.reducedMotionKeyframes : exit.keyframes,
+        {
+          ...exit.options,
+          fill: 'forwards',
+        },
+      )
       animation.finished
         .then(() => {
           setIsMounted(false)