pds.ls
atmosphere explorer
pds.ls
tool
typescript
atproto
image opening/closing animation
handle.invalid
+18
-4
src/components/json.tsx
+18
-4
src/components/json.tsx
···
318
319
const MediaDisplay = () => {
320
const [expanded, setExpanded] = createSignal(false);
321
322
createEffect(() => {
323
if (!expanded()) return;
324
const handler = (e: KeyboardEvent) => {
325
-
if (e.key === "Escape") setExpanded(false);
326
};
327
window.addEventListener("keydown", handler);
328
onCleanup(() => window.removeEventListener("keydown", handler));
···
364
<Show when={expanded()}>
365
<Portal>
366
<div
367
-
class="fixed inset-0 z-50 flex cursor-zoom-out items-center justify-center bg-black/80"
368
-
onclick={() => setExpanded(false)}
369
>
370
-
<img class="max-h-screen max-w-screen object-contain" src={imageUrl()} />
371
</div>
372
</Portal>
373
</Show>
···
318
319
const MediaDisplay = () => {
320
const [expanded, setExpanded] = createSignal(false);
321
+
const [closing, setClosing] = createSignal(false);
322
+
323
+
const closeExpanded = () => {
324
+
setClosing(true);
325
+
setTimeout(() => {
326
+
setExpanded(false);
327
+
setClosing(false);
328
+
}, 200);
329
+
};
330
331
createEffect(() => {
332
if (!expanded()) return;
333
const handler = (e: KeyboardEvent) => {
334
+
if (e.key === "Escape") closeExpanded();
335
};
336
window.addEventListener("keydown", handler);
337
onCleanup(() => window.removeEventListener("keydown", handler));
···
373
<Show when={expanded()}>
374
<Portal>
375
<div
376
+
class="fixed inset-0 z-50 flex cursor-zoom-out items-center justify-center bg-black/80 transition-opacity duration-200 starting:opacity-0"
377
+
classList={{ "opacity-0": closing() }}
378
+
onclick={closeExpanded}
379
>
380
+
<img
381
+
class="max-h-screen max-w-screen object-contain transition-all duration-200 starting:scale-95 starting:opacity-0"
382
+
classList={{ "scale-95 opacity-0": closing() }}
383
+
src={imageUrl()}
384
+
/>
385
</div>
386
</Portal>
387
</Show>