From ff2a82d35844081d7d7e058ffff326a73704d8cc Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Wed, 12 Feb 2025 21:20:08 +0000
Subject: Animate dropdown menus (#7704)

* animate dropdowns

* rm unused animation
---
 src/components/Menu/index.web.tsx | 9 ++++++++-
 src/style.css                     | 6 ++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/Menu/index.web.tsx b/src/components/Menu/index.web.tsx
index dc9116168..eb52895d4 100644
--- a/src/components/Menu/index.web.tsx
+++ b/src/components/Menu/index.web.tsx
@@ -4,6 +4,7 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 
+import {useA11y} from '#/state/a11y'
 import {atoms as a, flatten, useTheme, web} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
@@ -177,10 +178,15 @@ export function Outer({
   style?: StyleProp<ViewStyle>
 }>) {
   const t = useTheme()
+  const {reduceMotionEnabled} = useA11y()
 
   return (
     <DropdownMenu.Portal>
-      <DropdownMenu.Content sideOffset={5} loop aria-label="Test">
+      <DropdownMenu.Content
+        sideOffset={5}
+        loop
+        aria-label="Test"
+        className="dropdown-menu-transform-origin">
         <View
           style={[
             a.rounded_sm,
@@ -189,6 +195,7 @@ export function Outer({
             t.name === 'light' ? t.atoms.bg : t.atoms.bg_contrast_25,
             t.atoms.shadow_md,
             t.atoms.border_contrast_low,
+            !reduceMotionEnabled && a.zoom_fade_in,
             style,
           ]}>
           {children}
diff --git a/src/style.css b/src/style.css
index 770cb5e00..dd13b13be 100644
--- a/src/style.css
+++ b/src/style.css
@@ -187,6 +187,7 @@ input:focus {
   animation: rotate 500ms linear infinite;
 }
 
+/* animations for atoms */
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -214,6 +215,11 @@ input:focus {
   }
 }
 
+/* animating radix dropdowns requires knowing the data attributes */
+.dropdown-menu-transform-origin > * {
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+}
+
 .force-no-clicks > *,
 .force-no-clicks * {
   pointer-events: none !important;
-- 
cgit 1.4.1