Animate dropdown menus (#7704)

* animate dropdowns

* rm unused animation

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}