temp/UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

iter(g200): 编排浮层分层入场与弹层子项交错

Browse Source 
3 处私写缓动归档：进度条与页签指示器归 ease-out，
弹窗本体过冲归新增的 --ua-ease-spring 回弹档。
弹窗 / 抽屉内容层（body、foot）在面板落位后淡入，
delay 走 --ua-duration-fast 近似 60ms 错峰，不新增时长令牌。
下拉菜单与选择面板前 8 项按 nth-child 逐个递进一个微步
（新增 --ua-duration-step 0.02s，由 calc 派生，不写字面时长）。
减少动效偏好下上述动画一律 none 且 delay 清零。

Refs: g200
This commit is contained in:
HIsheR
2026-10-26 18:23:23 +08:00
parent bfb9178733
commit 91aa304d94
1 changed files with 42 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skin/ui/ui.css
+42 -3
View File
@@ -587,6 +587,37 @@ body.ua-col-resizing {
margin: var(--ua-space-1) var(--ua-space-05);
background: var(--ua-border-subtle);
}
/* —— 弹层子项交错入场：前 8 项逐项递增一个微步（20ms），第 9 项起不打散（长列表错峰会变成拖沓） —— */
.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;
}
.ua-select-pop.ua-open .ua-option:nth-child(2),
.ua-menu-pop.ua-open .ua-menu-item:nth-child(2) { animation-delay: calc(var(--ua-duration-step) * 1); }
.ua-select-pop.ua-open .ua-option:nth-child(3),
.ua-menu-pop.ua-open .ua-menu-item:nth-child(3) { animation-delay: calc(var(--ua-duration-step) * 2); }
.ua-select-pop.ua-open .ua-option:nth-child(4),
.ua-menu-pop.ua-open .ua-menu-item:nth-child(4) { animation-delay: calc(var(--ua-duration-step) * 3); }
.ua-select-pop.ua-open .ua-option:nth-child(5),
.ua-menu-pop.ua-open .ua-menu-item:nth-child(5) { animation-delay: calc(var(--ua-duration-step) * 4); }
.ua-select-pop.ua-open .ua-option:nth-child(6),
.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-breadcrumb {
@@ -1542,7 +1573,7 @@ button.ua-step-dot:hover {
width: 0;
border-radius: inherit;
background: linear-gradient(90deg, color-mix(in srgb, var(--ua-color-accent) 65%, transparent), var(--ua-color-accent));
transition: width var(--ua-duration-slower) cubic-bezier(0.4, 0, 0.2, 1);
transition: width var(--ua-duration-slower) var(--ua-ease-out);
}
.ua-progress-fill::after {
content: '';
@@ -1690,7 +1721,7 @@ button.ua-step-dot:hover {
height: 2px;
border-radius: 1px;
background: var(--ua-color-accent);
transition: left var(--ua-duration-slow) cubic-bezier(0.4, 0, 0.2, 1), width var(--ua-duration-slow) cubic-bezier(0.4, 0, 0.2, 1);
transition: left var(--ua-duration-slow) var(--ua-ease-out), width var(--ua-duration-slow) var(--ua-ease-out);
}
/* —— 表单 —— */
@@ -1883,7 +1914,7 @@ button.ua-step-dot:hover {
background: var(--ua-color-surface);
border: 1px solid var(--ua-color-border);
box-shadow: var(--ua-shadow-4);
animation: ua-pop-in var(--ua-duration-base) cubic-bezier(0.2, 0.9, 0.3, 1.2);
animation: ua-pop-in var(--ua-duration-base) var(--ua-ease-spring); /* 回弹档：弹窗本体落位时轻微过冲，比线性缩放有「弹出来」的手感 */
}
/* 宽度档位：md 为基准，sm / lg 覆盖 */
.ua-modal-sm {
@@ -1938,6 +1969,14 @@ button.ua-step-dot:hover {
.ua-modal-body {
padding: var(--ua-space-4);
}
/* —— 浮层分层入场：面板先落位，内容层错峰跟随；delay 走 fast 档（≈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);
}
.ua-textarea:focus-visible {
outline: none;
border-color: var(--ua-color-accent);