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:
+19
-19
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user