forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[Web] Scale animation when clicking on images (#10305)
authored by
Samuel Newman
and committed by
GitHub
ae0c2e86
b8cabfaa
+28
-9
+17
-3
src/components/images/AutoSizedImage.tsx
+17
-3
src/components/images/AutoSizedImage.tsx
···
13
13
14
14
import {type Dimensions} from '#/lib/media/types'
15
15
import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
16
-
import {atoms as a, useTheme} from '#/alf'
16
+
import {atoms as a, useTheme, web} from '#/alf'
17
17
import {ArrowsDiagonalOut_Stroke2_Corner0_Rounded as Fullscreen} from '#/components/icons/ArrowsDiagonal'
18
18
import {MediaInsetBorder} from '#/components/MediaInsetBorder'
19
19
import {Text} from '#/components/Typography'
···
210
210
color: utils.alpha(t.atoms.bg.backgroundColor, 0.2),
211
211
foreground: true,
212
212
}}
213
-
style={[
213
+
style={({pressed}) => [
214
214
a.w_full,
215
215
a.rounded_md,
216
216
a.overflow_hidden,
217
217
t.atoms.bg_contrast_25,
218
218
{aspectRatio: max ?? 1},
219
+
web([
220
+
a.transition_transform,
221
+
{transitionDuration: '200ms'},
222
+
pressed && {transform: [{scale: 0.99}]},
223
+
]),
219
224
]}>
220
225
{contents}
221
226
</Pressable>
···
237
242
color: utils.alpha(t.atoms.bg.backgroundColor, 0.2),
238
243
foreground: true,
239
244
}}
240
-
style={[a.h_full]}>
245
+
style={({pressed}) => [
246
+
a.h_full,
247
+
a.rounded_md,
248
+
a.overflow_hidden,
249
+
web([
250
+
a.transition_transform,
251
+
{transitionDuration: '200ms'},
252
+
pressed && {transform: [{scale: 0.99}]},
253
+
]),
254
+
]}>
241
255
{contents}
242
256
</Pressable>
243
257
</ConstrainedImage>
+11
-6
src/components/images/Gallery/index.tsx
+11
-6
src/components/images/Gallery/index.tsx
···
430
430
color: utils.alpha(t.atoms.bg.backgroundColor, 0.2),
431
431
foreground: true,
432
432
}}
433
-
style={[
433
+
style={({pressed}) => [
434
434
a.rounded_md,
435
435
a.overflow_hidden,
436
436
t.atoms.bg_contrast_25,
437
-
web({
438
-
cursor: 'inherit',
439
-
outline: 0,
440
-
border: 0,
441
-
}),
437
+
web([
438
+
{
439
+
cursor: 'inherit',
440
+
outline: 0,
441
+
border: 0,
442
+
},
443
+
a.transition_transform,
444
+
{transitionDuration: '200ms'},
445
+
pressed && {transform: [{scale: 0.99}]},
446
+
]),
442
447
]}>
443
448
<Image
444
449
source={{uri: image.thumb}}