Skip to content

feat(ui): micro-interactions — press feedback, stat lift, number bump, reduced-motion (v1.18 E) - #52

Merged
argszero merged 1 commit into
mainfrom
feat/ui-ue-round3-motion
Aug 17, 2026
Merged

argszero merged 1 commit into
mainfrom
feat/ui-ue-round3-motion

Conversation

@argszero

Copy link
Copy Markdown
Owner

Summary

Implements item E (动效与系统偏好 / Micro-interactions & system preference) of the UI/UE round-3 wave (rant 2026-08-17T18:06:09, branch feat/ui-ue-round3, version v1.18).

Three acceptance points:

  1. Button press feedback — .btn:active:not(:disabled) { transform: scale(0.98) }, smooth via the existing transition: all .15s on .btn; disabled buttons excluded (pointer-events: none already blocks them).
  2. Stat card hover micro-lift — .stat:hover lifts translateY(-2px) with border/shadow elevation, matching the existing .card:hover language (0.15–0.18s transitions).
  3. Number/points change animation — new bump(el) helper (remove .bump → reflow → re-add, replaying @keyframes numJump: translateY(-3px) scale(1.02), 0.35s). Wired into all 4 balance-mutation points:
    • wallet top-up → #side-balance + #wallet-balance
    • chat consumption (deduct) → #side-balance
    • raise-request approval for the current user → #side-balance
    • operator top-up when topping up the current user (guarded by isMe so bumping another user doesn't animate an unchanged balance)

Plus prefers-reduced-motion: reduce — a global media block clamps animation-duration/transition-duration to 0.01ms, animation-iteration-count to 1, and scroll-behavior to auto: animations/transitions disabled, all functionality preserved.

Design notes

  • Zero external dependencies (pure CSS + a tiny JS helper), consistent with the wave's constraints.
  • #side-balance is an inline <b> — needs display:inline-block for transform to animate.
  • Reduced-motion rule is global (*, *::before, *::after), so it covers the existing view/tbody fade-ins too.

Verification

  • DOM-stub smoke test (13 assertions): top-up bumps both balance elements, consumption deduct bumps sidebar balance, raise approval bumps balance, bump replay works (remove→reflow→add) ✓
  • node --check ✓ · cargo test ✓ · cargo fmt --check ✓

Rant (verbatim)

E. 动效细节与系统偏好

  • 按钮按压反馈(:active 轻微下压 scale(0.98));统计卡 hover 微抬升
  • 数字/点数变化时轻微跳动动画(如充值后余额)
  • 尊重 prefers-reduced-motion: reduce:禁用过渡/动画(保留功能)

Docs

  • docs/user-stories.md v1.18 entry extended with item E (remaining F–G noted)
  • ui/README.md: new "动效与系统偏好约定" section

@argszero
argszero merged commit bbde077 into main Aug 17, 2026
1 check passed
argszero added a commit that referenced this pull request Sep 27, 2026
…#316)

`ui/README.md` said the stat-card hover lift lives on `.stat:hover`, and the
comment above `.stat-card` in `ui/css/style.css` said that class is "provided
as an alias of `.stat`". Neither is true: the stylesheet has zero `.stat`
rules, `class="stat"` appears nowhere in `ui/`, and the only `.stat` text left
in the sheet sits inside that comment.

`75dcb2c` (#154) deleted the `.stat` family and moved to the prototype name
`.stat-card`; it updated neither the README line (`bbde077` / #52 wrote it when
the name was still `.stat`) nor the comment it wrote in the same commit. The
hover lift has been on `.stat-card:hover` (ui/css/style.css:1110) ever since.

Name the selector that has a rule, and say where the old name went.
The stylesheet token is bumped because this touches ui/css/style.css.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant