Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Animate dropdown menus (#7704)

* animate dropdowns

* rm unused animation

authored by

Samuel Newman and committed by
GitHub
ff2a82d3 5d3e2e14

+14 -1
+8 -1
src/components/Menu/index.web.tsx
··· 4 4 import {useLingui} from '@lingui/react' 5 5 import * as DropdownMenu from '@radix-ui/react-dropdown-menu' 6 6 7 + import {useA11y} from '#/state/a11y' 7 8 import {atoms as a, flatten, useTheme, web} from '#/alf' 8 9 import * as Dialog from '#/components/Dialog' 9 10 import {useInteractionState} from '#/components/hooks/useInteractionState' ··· 177 178 style?: StyleProp<ViewStyle> 178 179 }>) { 179 180 const t = useTheme() 181 + const {reduceMotionEnabled} = useA11y() 180 182 181 183 return ( 182 184 <DropdownMenu.Portal> 183 - <DropdownMenu.Content sideOffset={5} loop aria-label="Test"> 185 + <DropdownMenu.Content 186 + sideOffset={5} 187 + loop 188 + aria-label="Test" 189 + className="dropdown-menu-transform-origin"> 184 190 <View 185 191 style={[ 186 192 a.rounded_sm, ··· 189 195 t.name === 'light' ? t.atoms.bg : t.atoms.bg_contrast_25, 190 196 t.atoms.shadow_md, 191 197 t.atoms.border_contrast_low, 198 + !reduceMotionEnabled && a.zoom_fade_in, 192 199 style, 193 200 ]}> 194 201 {children}
+6
src/style.css
··· 187 187 animation: rotate 500ms linear infinite; 188 188 } 189 189 190 + /* animations for atoms */ 190 191 @keyframes fadeIn { 191 192 from { 192 193 opacity: 0; ··· 212 213 to { 213 214 transform: scale(1); 214 215 } 216 + } 217 + 218 + /* animating radix dropdowns requires knowing the data attributes */ 219 + .dropdown-menu-transform-origin > * { 220 + transform-origin: var(--radix-dropdown-menu-content-transform-origin); 215 221 } 216 222 217 223 .force-no-clicks > *,