forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
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
+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
+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 > *,