nasso.dev
my fork of the bluesky client
Fix jumpy web animation for modal backdrop (#6673)
authored by
GitHub
aa58216b
fdc3f0f1
+27
-16
src/components/Dialog/index.web.tsx
+27
-16
src/components/Dialog/index.web.tsx
···
7
7
View,
8
8
ViewStyle,
9
9
} from 'react-native'
10
-
import Animated, {FadeIn, FadeInDown} from 'react-native-reanimated'
11
10
import {msg} from '@lingui/macro'
12
11
import {useLingui} from '@lingui/react'
13
12
import {DismissableLayer} from '@radix-ui/react-dismissable-layer'
···
42
41
onClose,
43
42
}: React.PropsWithChildren<DialogOuterProps>) {
44
43
const {_} = useLingui()
45
-
const t = useTheme()
46
44
const {gtMobile} = useBreakpoints()
47
45
const [isOpen, setIsOpen] = React.useState(false)
48
46
const {setDialogIsOpen} = useDialogStateControlContext()
···
118
116
gtMobile ? a.p_lg : a.p_md,
119
117
{overflowY: 'auto'},
120
118
]}>
121
-
<Animated.View
122
-
entering={FadeIn.duration(150)}
123
-
// exiting={FadeOut.duration(150)}
124
-
style={[
125
-
web(a.fixed),
126
-
a.inset_0,
127
-
{opacity: 0.8, backgroundColor: t.palette.black},
128
-
]}
129
-
/>
130
-
119
+
<Backdrop />
131
120
<View
132
121
style={[
133
122
a.w_full,
···
164
153
useFocusGuards()
165
154
return (
166
155
<FocusScope loop asChild trapped>
167
-
<Animated.View
156
+
<View
168
157
role="dialog"
169
158
aria-role="dialog"
170
159
aria-label={label}
···
174
163
onClick={stopPropagation}
175
164
onStartShouldSetResponder={_ => true}
176
165
onTouchEnd={stopPropagation}
177
-
entering={FadeInDown.duration(100)}
178
-
// exiting={FadeOut.duration(100)}
179
166
style={flatten([
180
167
a.relative,
181
168
a.rounded_md,
···
188
175
shadowColor: t.palette.black,
189
176
shadowOpacity: t.name === 'light' ? 0.1 : 0.4,
190
177
shadowRadius: 30,
178
+
// @ts-ignore web only
179
+
animation: 'fadeIn ease-out 0.1s',
191
180
},
192
181
flatten(style),
193
182
])}>
···
201
190
{children}
202
191
</View>
203
192
</DismissableLayer>
204
-
</Animated.View>
193
+
</View>
205
194
</FocusScope>
206
195
)
207
196
}
···
268
257
export function Handle() {
269
258
return null
270
259
}
260
+
261
+
function Backdrop() {
262
+
const t = useTheme()
263
+
return (
264
+
<View
265
+
style={{
266
+
opacity: 0.8,
267
+
}}>
268
+
<View
269
+
style={[
270
+
a.fixed,
271
+
a.inset_0,
272
+
{
273
+
backgroundColor: t.palette.black,
274
+
// @ts-ignore web only
275
+
animation: 'fadeIn ease-out 0.15s',
276
+
},
277
+
]}
278
+
/>
279
+
</View>
280
+
)
281
+
}
+2
-2
src/components/ProfileHoverCard/index.web.tsx
+2
-2
src/components/ProfileHoverCard/index.web.tsx
···
302
302
const animationStyle = {
303
303
animation:
304
304
currentState.stage === 'hiding'
305
-
? `avatarHoverFadeOut ${HIDE_DURATION}ms both`
306
-
: `avatarHoverFadeIn ${SHOW_DURATION}ms both`,
305
+
? `fadeOut ${HIDE_DURATION}ms both`
306
+
: `fadeIn ${SHOW_DURATION}ms both`,
307
307
}
308
308
309
309
return (
+2
-2
src/style.css
+2
-2
src/style.css
···
184
184
animation: rotate 500ms linear infinite;
185
185
}
186
186
187
-
@keyframes avatarHoverFadeIn {
187
+
@keyframes fadeIn {
188
188
from {
189
189
opacity: 0;
190
190
}
···
193
193
}
194
194
}
195
195
196
-
@keyframes avatarHoverFadeOut {
196
+
@keyframes fadeOut {
197
197
from {
198
198
opacity: 1;
199
199
}