fix(ui): align settled animated numbers (#42998)
deploy-www / deploy (push) Has been cancelled
publish / version (push) Has been cancelled
publish / build-cli (push) Has been cancelled
publish / sign-cli-macos (push) Has been cancelled
publish / build-node-cli (map[host:blacksmith-4vcpu-ubuntu-2404 target:linux-x64]) (push) Has been cancelled
publish / build-node-cli (map[host:blacksmith-4vcpu-ubuntu-2404-arm target:linux-arm64]) (push) Has been cancelled
publish / build-node-cli (map[host:blacksmith-4vcpu-windows-2025 target:windows-arm64]) (push) Has been cancelled
publish / build-node-cli (map[host:blacksmith-4vcpu-windows-2025 target:windows-x64]) (push) Has been cancelled
publish / build-node-cli (map[host:macos-26 target:darwin-arm64]) (push) Has been cancelled
publish / sign-cli-windows (push) Has been cancelled
publish / build-electron (map[bun_install_flags:--os=darwin --cpu=arm64 host:macos-26 platform_flag:--mac --arm64 target:aarch64-apple-darwin]) (push) Has been cancelled
publish / build-electron (map[bun_install_flags:--os=darwin --cpu=x64 host:macos-26-intel platform_flag:--mac --x64 target:x86_64-apple-darwin]) (push) Has been cancelled
publish / build-electron (map[host:blacksmith-4vcpu-ubuntu-2404 platform_flag:--linux target:x86_64-unknown-linux-gnu]) (push) Has been cancelled
publish / build-electron (map[host:blacksmith-4vcpu-ubuntu-2404-arm platform_flag:--linux --arm64 target:aarch64-unknown-linux-gnu]) (push) Has been cancelled
publish / build-electron (map[host:blacksmith-4vcpu-windows-2025 platform_flag:--win target:x86_64-pc-windows-msvc]) (push) Has been cancelled
publish / build-electron (map[host:windows-2025 platform_flag:--win --arm64 target:aarch64-pc-windows-msvc]) (push) Has been cancelled
publish / publish (push) Has been cancelled
generate / generate (push) Has been cancelled
typecheck / typecheck (push) Has been cancelled

Co-authored-by: Luke Parker <10430890+Hona@users.noreply.github.com>
This commit is contained in:
opencode-agent[bot]
2026-08-17 16:53:43 +10:00
committed by GitHub
parent e26473f0bc
commit 6359623e24
2 changed files with 31 additions and 13 deletions
+29 -11
View File
@@ -17,7 +17,7 @@
}
[data-slot="animated-number-digit"] {
display: inline-block;
display: inline-grid;
width: 1ch;
height: 1em;
line-height: 1em;
@@ -41,19 +41,12 @@
mask-repeat: no-repeat;
}
[data-slot="animated-number-static"],
[data-slot="animated-number-strip"] {
display: inline-flex;
flex-direction: column;
transform: translateY(calc(var(--animated-number-offset, 10) * -1em));
transition-property: transform;
transition-duration: var(--animated-number-duration, 560ms);
transition-timing-function: var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
[data-slot="animated-number-strip"][data-animating="false"] {
transition-duration: 0ms;
grid-area: 1 / 1;
}
[data-slot="animated-number-static"],
[data-slot="animated-number-cell"] {
display: inline-flex;
align-items: center;
@@ -62,6 +55,24 @@
height: 1em;
line-height: 1em;
}
[data-slot="animated-number-digit"][data-animating="true"] [data-slot="animated-number-static"] {
visibility: hidden;
}
[data-slot="animated-number-strip"] {
display: inline-flex;
flex-direction: column;
margin-top: calc(var(--animated-number-offset, 10) * -1em);
transition-property: margin-top;
transition-duration: var(--animated-number-duration, 560ms);
transition-timing-function: var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
[data-slot="animated-number-digit"][data-animating="false"] [data-slot="animated-number-strip"] {
transition-duration: 0ms;
visibility: hidden;
}
}
@media (prefers-reduced-motion: reduce) {
@@ -71,5 +82,12 @@
[data-component="animated-number"] [data-slot="animated-number-strip"] {
transition-duration: 0ms;
visibility: hidden;
}
[data-component="animated-number"]
[data-slot="animated-number-digit"][data-animating]
[data-slot="animated-number-static"] {
visibility: visible;
}
}
@@ -43,10 +43,10 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
)
return (
<span data-slot="animated-number-digit">
<span data-slot="animated-number-digit" data-animating={animating() ? "true" : "false"}>
<span data-slot="animated-number-static">{props.value}</span>
<span
data-slot="animated-number-strip"
data-animating={animating() ? "true" : "false"}
onTransitionEnd={() => {
setState("animating", false)
setState("step", (value) => normalize(value) + 10)