From 91aa304d944827b8bb38bfb43a48228568fbdabc Mon Sep 17 00:00:00 2001
From: HIsheR <shawn1440982358@163.com>
Date: Mon, 26 Oct 2026 18:23:23 +0800
Subject: [PATCH] =?UTF-8?q?iter(g200):=20=E7=BC=96=E6=8E=92=E6=B5=AE?=
 =?UTF-8?q?=E5=B1=82=E5=88=86=E5=B1=82=E5=85=A5=E5=9C=BA=E4=B8=8E=E5=BC=B9?=
 =?UTF-8?q?=E5=B1=82=E5=AD=90=E9=A1=B9=E4=BA=A4=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 packages/skin/ui/ui.css | 45 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 42 insertions(+), 3 deletions(-)

diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css
index 53b5b9f..b4e2184 100644
--- a/packages/skin/ui/ui.css
+++ b/packages/skin/ui/ui.css
@@ -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);