pds.ls
atmosphere explorer
pds.ls
tool
typescript
atproto
image opening/closing animation
juli.ee
+18
-4
src/components/json.tsx
+18
-4
src/components/json.tsx
···
318
318
319
319
const MediaDisplay = () => {
320
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
+
};
321
330
322
331
createEffect(() => {
323
332
if (!expanded()) return;
324
333
const handler = (e: KeyboardEvent) => {
325
-
if (e.key === "Escape") setExpanded(false);
334
+
if (e.key === "Escape") closeExpanded();
326
335
};
327
336
window.addEventListener("keydown", handler);
328
337
onCleanup(() => window.removeEventListener("keydown", handler));
···
364
373
<Show when={expanded()}>
365
374
<Portal>
366
375
<div
367
-
class="fixed inset-0 z-50 flex cursor-zoom-out items-center justify-center bg-black/80"
368
-
onclick={() => setExpanded(false)}
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}
369
379
>
370
-
<img class="max-h-screen max-w-screen object-contain" src={imageUrl()} />
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
+
/>
371
385
</div>
372
386
</Portal>
373
387
</Show>