fix(ui): 归位 reduced-motion 兜底并收敛分层入场延迟

- 删除被入场声明反超的 reduced-motion 块,
  modal/drawer 内容层并入末尾 !important 清单,与全库口径统一
- 内容层 delay 由 fast 档 150ms 改为
  --ua-duration-step × 3 = 60ms,与 g200 验收一致
- 补 .ua-btn-ghost:active 撤内高光,键盘/触屏按下不再露白线
- 交错入场第 8 项起锁定同一档(n+8),顺序单调不倒退
- 更正 g201 焦点环注释归因(菜单面板无 overflow,未裁切)
This commit is contained in:
HIsheR
2026-10-26 18:33:36 +08:00
parent e4351c4b25
commit 0821286329
+19 -19
View File
@@ -56,6 +56,11 @@
background: var(--ua-color-tint-accent-weak);
box-shadow: none; /* 透明底上叠内高光会露出一道悬空白线 */
}
/* 按下态单独压掉内高光:.ua-btn:active 特异性高于 .ua-btn-ghost,
不补这一条时键盘 Space/Enter 与触屏按下会把内高光重新打回透明底 */
.ua-btn-ghost:active {
box-shadow: none;
}
.ua-btn-danger {
background: var(--ua-color-danger);
border-color: var(--ua-color-danger);
@@ -476,8 +481,8 @@ body.ua-col-resizing {
.ua-option:active:not(:disabled) {
background: var(--ua-color-surface-2);
}
/* 弹层内的项:所在面板是滚动容器,会把外偏移焦点环裁掉,
与 cascader 项一致改用内嵌描边,键盘导航才真看得见焦点 */
/* 弹层内的项:下拉面板是滚动容器会裁掉外偏移焦点环,菜单面板虽不裁切,
但两者的密集列表换成内嵌描边后更整齐;与 cascader 项保持同一口径 */
.ua-option:focus-visible,
.ua-menu-item:focus-visible {
outline: 2px solid var(--ua-color-accent);
@@ -594,7 +599,8 @@ body.ua-col-resizing {
margin: var(--ua-space-1) var(--ua-space-05);
background: var(--ua-border-subtle);
}
/* —— 弹层子项交错入场:前 8 项逐项递增一个微步(20ms),第 9 项起不打散(长列表错峰会变成拖沓) —— */
/* —— 弹层子项交错入场:前 7 项逐项递增一个微步(20ms),第 8 项起锁定在同一档,
长列表不继续打散(否则错峰累积成拖沓),也保证顺序单调、后段不会抢在前段之前出现 —— */
.ua-select-pop.ua-open .ua-option,
.ua-menu-pop.ua-open .ua-menu-item {
animation: ua-fade var(--ua-duration-fast) var(--ua-ease-out) both;
@@ -611,20 +617,10 @@ body.ua-col-resizing {
.ua-menu-pop.ua-open .ua-menu-item:nth-child(6) { animation-delay: calc(var(--ua-duration-step) * 5); }
.ua-select-pop.ua-open .ua-option:nth-child(7),
.ua-menu-pop.ua-open .ua-menu-item:nth-child(7) { animation-delay: calc(var(--ua-duration-step) * 6); }
.ua-select-pop.ua-open .ua-option:nth-child(8),
.ua-menu-pop.ua-open .ua-menu-item:nth-child(8) { animation-delay: calc(var(--ua-duration-step) * 7); }
/* 减少动效偏好:新增的分层入场与交错一律关掉,并把 delay 清零(否则内容会先隐身一段时间) */
@media (prefers-reduced-motion: reduce) {
.ua-modal-overlay.ua-open .ua-modal-body,
.ua-modal-overlay.ua-open .ua-modal-foot,
.ua-drawer-overlay.ua-open .ua-drawer-body,
.ua-drawer-overlay.ua-open .ua-drawer-foot,
.ua-select-pop.ua-open .ua-option,
.ua-menu-pop.ua-open .ua-menu-item {
animation: none;
animation-delay: 0s;
}
}
.ua-select-pop.ua-open .ua-option:nth-child(n+8),
.ua-menu-pop.ua-open .ua-menu-item:nth-child(n+8) { animation-delay: calc(var(--ua-duration-step) * 7); }
/* 减少动效偏好的兜底统一在文件末尾的 prefers-reduced-motion 清单里(那里带 !important,
才不会因源码序在后被入场声明覆盖) */
/* —— 面包屑 —— */
.ua-breadcrumb {
@@ -1979,13 +1975,13 @@ button.ua-step-dot:hover {
.ua-modal-body {
padding: var(--ua-space-4);
}
/* —— 浮层分层入场:面板先落位,内容层错峰跟随;delay 走 fast 档(≈60ms)近似,不新增时长令牌 —— */
/* —— 浮层分层入场:面板先落位,内容层错峰跟随;delay 走微步令牌 3 档(20ms × 3 = 60ms),不新增时长令牌 —— */
.ua-modal-overlay.ua-open .ua-modal-body,
.ua-modal-overlay.ua-open .ua-modal-foot,
.ua-drawer-overlay.ua-open .ua-drawer-body,
.ua-drawer-overlay.ua-open .ua-drawer-foot {
animation: ua-fade var(--ua-duration-base) var(--ua-ease-out) both;
animation-delay: var(--ua-duration-fast);
animation-delay: calc(var(--ua-duration-step) * 3);
}
.ua-textarea:focus-visible {
outline: none;
@@ -2104,8 +2100,12 @@ button.ua-step-dot:hover {
.ua-form-error,
.ua-modal,
.ua-modal-overlay,
.ua-modal-body,
.ua-modal-foot,
.ua-drawer,
.ua-drawer-overlay,
.ua-drawer-body,
.ua-drawer-foot,
.ua-step-dot,
.ua-rate-star {
animation: none !important;