vrr/opencode
2
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-08-21 23:33:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

fix(ui): align settled animated numbers (#42998)

Browse source 
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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 31 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

40
packages/ui/src/components/animated-number.css
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;
}
}

4
packages/ui/src/components/animated-number.tsx
View file

@ -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)