From a607a40d19a0201bf65eab43a71c63959b817618 Mon Sep 17 00:00:00 2001 From: HIsheR Date: Mon, 26 Oct 2026 19:54:47 +0800 Subject: [PATCH] =?UTF-8?q?iter(g214):=20=E6=B5=AE=E5=B1=82=E5=85=A5?= =?UTF-8?q?=E5=9C=BA=E5=8A=A8=E6=95=88=E6=94=B6=E6=95=9B=E4=B8=BA=E7=BB=9F?= =?UTF-8?q?=E4=B8=80=20keyframes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- llms-full.txt | 6 ++- packages/skin/ui/ua.manifest.json | 2 +- packages/skin/ui/ui.css | 68 +++++++++++++++---------------- 3 files changed, 38 insertions(+), 38 deletions(-) diff --git a/llms-full.txt b/llms-full.txt index f95c799..c9bf4fb 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -1,6 +1,6 @@ # @ui-arch 组件库 Agent 文档（无图形版） -> 自动生成于 2026-10-26T11:52:57.122Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 +> 自动生成于 2026-10-26T11:54:31.013Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。 ## 快速上手 @@ -50,10 +50,12 @@ ## @ui-arch/ui（skin-dom）v0.1.0 -28 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。 +70 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。 阴影对照表：下拉弹层=shadow-2 / 浮层与悬浮按钮=shadow-3 / 模态弹窗与抽屉及通知=shadow-4 / 卡片与输入组轻浮起=shadow-1；主按钮与强调件的主题色投影=shadow-accent / shadow-accent-strong，组件内不得再手写 box-shadow 字面值。 +浮层入场统一：新弹层用 animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both（自上而下 4px 淡入），弹层翻到触发器上方时叠 .is-flip 覆盖成 ua-pop-rise（自下而上），不要再为单个组件自造 keyframes——方向与时长各写一份就会出现「翻转后还朝下入场」的错位。 + ### image — 图片 Image 参数： diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index 3cfd5b0..0346280 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/packages/skin/ui/ua.manifest.json @@ -138,7 +138,7 @@ "无障碍基线：装饰性占位（skeleton）aria-hidden、加载指示（spinner）role=status、关闭按钮必须 aria-label、弹层弹窗 aria-haspopup/expanded、读屏可见的状态一律同步 aria-*" ], "docs": { - "intro": "28 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。\n\n阴影对照表：下拉弹层=shadow-2 / 浮层与悬浮按钮=shadow-3 / 模态弹窗与抽屉及通知=shadow-4 / 卡片与输入组轻浮起=shadow-1；主按钮与强调件的主题色投影=shadow-accent / shadow-accent-strong，组件内不得再手写 box-shadow 字面值。", + "intro": "70 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。\n\n阴影对照表：下拉弹层=shadow-2 / 浮层与悬浮按钮=shadow-3 / 模态弹窗与抽屉及通知=shadow-4 / 卡片与输入组轻浮起=shadow-1；主按钮与强调件的主题色投影=shadow-accent / shadow-accent-strong，组件内不得再手写 box-shadow 字面值。\n\n浮层入场统一：新弹层用 animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both（自上而下 4px 淡入），弹层翻到触发器上方时叠 .is-flip 覆盖成 ua-pop-rise（自下而上），不要再为单个组件自造 keyframes——方向与时长各写一份就会出现「翻转后还朝下入场」的错位。", "steps": [ "安装依赖：pnpm add @ui-arch/ui @ui-arch/frame（workspace 内自动链接）", "引入样式：在应用入口 import '@ui-arch/ui/ui.css'，暗色主题在根元素设 data-theme='dark'", diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index e6fe0b8..51f916e 100644 --- a/packages/skin/ui/ui.css +++ b/packages/skin/ui/ui.css @@ -1956,6 +1956,15 @@ button.ua-step-dot:hover { opacity: 0; } } +/* 浮层入场：自上而下 4px 淡入（触发在下方、弹层向下展开）；翻转态改用 ua-pop-rise 反向 */ +@keyframes ua-pop-drop { + from { opacity: 0; transform: translateY(-4px); } + to { opacity: 1; transform: none; } +} +@keyframes ua-pop-rise { + from { opacity: 0; transform: translateY(4px); } + to { opacity: 1; transform: none; } +} @keyframes ua-pop-in { from { opacity: 0; @@ -3188,7 +3197,7 @@ button.ua-step-dot:hover { } .ua-cascader-pop.ua-open { display: block; - animation: ua-cascader-in var(--ua-duration-fast) ease both; + animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both; } .ua-cascader-pop.is-flip { margin-top: 0; @@ -3248,10 +3257,6 @@ button.ua-step-dot:hover { color: var(--ua-color-text-muted); font-size: var(--ua-font-size-xs); } -@keyframes ua-cascader-in { - from { opacity: 0; transform: translateY(-4px); } - to { opacity: 1; transform: translateY(0); } -} @media (prefers-reduced-motion: reduce) { .ua-cascader-pop.ua-open { animation: none; } .ua-cascader-trigger, @@ -3348,7 +3353,7 @@ button.ua-step-dot:hover { } .ua-autocomplete-pop.ua-open { display: block; - animation: ua-ac-in var(--ua-duration-fast) ease both; + animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both; } .ua-autocomplete-pop.is-flip { margin-top: 0; @@ -3387,10 +3392,6 @@ button.ua-step-dot:hover { font-size: var(--ua-font-size-sm); color: var(--ua-color-text-muted); } -@keyframes ua-ac-in { - from { opacity: 0; transform: translateY(-4px); } - to { opacity: 1; transform: translateY(0); } -} @media (prefers-reduced-motion: reduce) { .ua-autocomplete-pop.ua-open { animation: none; } .ua-autocomplete-input, @@ -3449,7 +3450,7 @@ button.ua-step-dot:hover { } .ua-datepicker-pop.ua-open { display: block; - animation: ua-dp-in var(--ua-duration-fast) ease both; + animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both; } .ua-datepicker-pop.is-flip { margin-top: 0; @@ -3564,10 +3565,6 @@ button.ua-step-dot:hover { border-color: var(--ua-color-accent); background: var(--ua-color-tint-accent-weak); } -@keyframes ua-dp-in { - from { opacity: 0; transform: translateY(-4px); } - to { opacity: 1; transform: translateY(0); } -} @media (prefers-reduced-motion: reduce) { .ua-datepicker-pop.ua-open { animation: none; } .ua-datepicker-trigger, @@ -3693,7 +3690,7 @@ button.ua-step-dot:hover { } .ua-colorpicker-pop.ua-open { display: block; - animation: ua-cp-in var(--ua-duration-fast) ease both; + animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both; } .ua-colorpicker-pop.is-flip { margin-top: 0; @@ -3747,10 +3744,6 @@ button.ua-step-dot:hover { .ua-colorpicker-hex:focus { border-color: var(--ua-color-accent); } -@keyframes ua-cp-in { - from { opacity: 0; transform: translateY(-4px); } - to { opacity: 1; transform: translateY(0); } -} @media (prefers-reduced-motion: reduce) { .ua-colorpicker-pop.ua-open { animation: none; } .ua-colorpicker-trigger, @@ -3962,7 +3955,7 @@ button.ua-step-dot:hover { } .ua-multiselect-pop.ua-open { display: block; - animation: ua-ms-in var(--ua-duration-fast) ease both; + animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both; } .ua-multiselect-pop.is-flip { margin-top: 0; @@ -4017,10 +4010,6 @@ button.ua-step-dot:hover { font-size: var(--ua-font-size-sm); color: var(--ua-color-text-muted); } -@keyframes ua-ms-in { - from { opacity: 0; transform: translateY(-4px); } - to { opacity: 1; transform: translateY(0); } -} @media (prefers-reduced-motion: reduce) { .ua-multiselect-pop.ua-open { animation: none; } .ua-multiselect-box, @@ -4565,7 +4554,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); } } .ua-mentions.is-open .ua-mentions-pop { display: block; - animation: ua-mentions-in var(--ua-duration-fast) var(--ua-ease); + animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both; } .ua-mentions-item { display: flex; @@ -4586,10 +4575,6 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); } color: var(--ua-color-text-muted); font-size: var(--ua-font-size-sm); } -@keyframes ua-mentions-in { - from { opacity: 0; transform: translateY(-4px); } - to { opacity: 1; transform: none; } -} @media (prefers-reduced-motion: reduce) { .ua-mentions.is-open .ua-mentions-pop { animation: none; @@ -4664,11 +4649,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); } } .ua-treeselect.is-open .ua-treeselect-pop { display: block; - animation: ua-treeselect-in var(--ua-duration-fast) var(--ua-ease); -} -@keyframes ua-treeselect-in { - from { opacity: 0; transform: translateY(-4px); } - to { opacity: 1; transform: none; } + animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both; } @media (prefers-reduced-motion: reduce) { .ua-treeselect.is-open .ua-treeselect-pop { @@ -5146,3 +5127,20 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); } transform: none; } } + +/* ---- 浮层入场方向：翻转态的动画名覆盖（放在末尾，靠特异性 ua-open + is-flip 生效） ---- */ +.ua-cascader-pop.ua-open.is-flip { + animation-name: ua-pop-rise; /* 翻到上方：入场方向随位置镜像 */ +} +.ua-autocomplete-pop.ua-open.is-flip { + animation-name: ua-pop-rise; /* 翻到上方：入场方向随位置镜像 */ +} +.ua-datepicker-pop.ua-open.is-flip { + animation-name: ua-pop-rise; /* 翻到上方：入场方向随位置镜像 */ +} +.ua-colorpicker-pop.ua-open.is-flip { + animation-name: ua-pop-rise; /* 翻到上方：入场方向随位置镜像 */ +} +.ua-multiselect-pop.ua-open.is-flip { + animation-name: ua-pop-rise; /* 翻到上方：入场方向随位置镜像 */ +}