atmosphere explorer
pds.ls
tool
typescript
atproto
refine expand animation
+21
-5
+21
-5
src/views/pds.tsx
+21
-5
src/views/pds.tsx
···
4
4
import * as TID from "@atcute/tid";
5
5
import { A, useLocation, useParams } from "@solidjs/router";
6
6
import { createWindowVirtualizer } from "@tanstack/solid-virtual";
7
-
import { createResource, createSignal, For, Show } from "solid-js";
7
+
import { createEffect, createResource, createSignal, For, on, onCleanup, Show } from "solid-js";
8
8
import { Button } from "../components/button";
9
9
import DidHoverCard from "../components/hover-card/did";
10
10
import { setPDS } from "../components/navbar";
···
19
19
onToggle: () => void;
20
20
}) => {
21
21
const expanded = () => props.expanded;
22
+
const [collapsing, setCollapsing] = createSignal(false);
23
+
24
+
createEffect(
25
+
on(expanded, (curr, prev) => {
26
+
if (prev && !curr) {
27
+
setCollapsing(true);
28
+
const t = setTimeout(() => setCollapsing(false), 250);
29
+
onCleanup(() => clearTimeout(t));
30
+
}
31
+
}),
32
+
);
33
+
34
+
const animating = () => expanded() || collapsing();
22
35
23
36
return (
24
37
<div
25
38
classList={{
26
39
"group rounded-md border-[0.5px]": true,
40
+
"transition-[background-color,border-color,box-shadow] duration-250": animating(),
27
41
"dark:hover:bg-dark-200 border-transparent hover:bg-neutral-200/50": !expanded(),
28
-
"dark:bg-dark-300 border-neutral-200 bg-neutral-50 shadow-sm transition-[background-color,border-color,box-shadow] duration-200 dark:border-neutral-700 dark:shadow-dark-700":
42
+
"dark:bg-dark-300 border-neutral-200 bg-neutral-50 shadow-sm dark:border-neutral-700 dark:shadow-dark-700":
29
43
expanded(),
30
44
}}
31
45
>
···
37
51
>
38
52
<span
39
53
classList={{
40
-
"mt-0.5 flex shrink-0 items-center text-neutral-400 transition-transform duration-200 dark:text-neutral-500": true,
54
+
"mt-0.5 flex shrink-0 items-center text-neutral-400 transition-transform duration-250 dark:text-neutral-500": true,
41
55
"rotate-90": expanded(),
42
56
}}
43
57
>
···
65
79
<A
66
80
href={`/at://${props.repo.did}`}
67
81
classList={{
68
-
"flex shrink-0 items-center p-2 transition-colors duration-200": true,
82
+
"flex shrink-0 items-center p-2 transition-colors duration-500": true,
69
83
"invisible group-hover:visible not-hover:text-neutral-500 not-hover:dark:text-neutral-400":
70
84
!expanded(),
71
85
}}
···
76
90
</div>
77
91
<div
78
92
classList={{
79
-
"grid transition-[grid-template-rows] duration-200 ease-out": true,
93
+
"grid transition-[grid-template-rows] duration-250 ease-in-out": true,
80
94
"grid-rows-[1fr]": expanded(),
81
95
"grid-rows-[0fr]": !expanded(),
82
96
}}
···
224
238
left: 0,
225
239
width: "100%",
226
240
overflow: "visible",
241
+
"transition-property": "z-index",
242
+
"transition-delay": isExpanded() ? "0ms" : "250ms",
227
243
}}
228
244
>
229
245
<RepoCard