Skip to content

Commit 1cc3534

Browse files
committed
style(motion): 压缩相变块并复测守卫
1 parent 66f0e4a commit 1cc3534

1 file changed

Lines changed: 23 additions & 55 deletions

File tree

‎app/src/ui/primitives/motion.css‎

Lines changed: 23 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -188,45 +188,27 @@ details[open] > summary { color: var(--ed-ink-1); }
188188
}
189189
/* ▲▲▲ 环境层结束(第 ① 件探针摆动复用 `Loading.css` 的既有落点,档位调制见下面的强度三档块)▲▲▲ */
190190

191-
/* ▼▼▼ 相变态(T19;规格 §6.3 相变态表 + §8.4 / 裁决 R4.4)—— 三态 chrome 的换形与交叉淡入 ▼▼▼
192-
三态逐字(§6.3 表):**常态** = A′ 顶栏 + 域导航显示;**采集态** = 58px LIVE 仪表 + 域导航**隐藏** +
193-
**源列保留**;**复习态** = **零 chrome** + 域导航隐藏 + 单列卡片居中 640。
194-
本节只做**壳层 chrome**:域导航不必另立规则 —— 域 Tab 是 A′ 顶栏(`.shell-phase__idle` 那一层)的
195-
子树 ⇒ 整层淡出即同时兑现「顶栏换形」与「域导航隐藏」两栏。
191+
/* ▼▼▼ 相变态(T19;规格 §6.3 + §8.4 / 裁决 R4.4)—— 三态 chrome 的换形与交叉淡入 ▼▼▼
192+
常态 = A′ 顶栏 + 域导航;采集态 = 58px LIVE 仪表 + 域导航隐藏 + **源列保留**;复习态 = **零 chrome**。
193+
域导航不必另立规则:域 Tab 是常态层(`.shell-phase__idle` = A′ 顶栏)的子树 ⇒ 整层淡出两栏一起兑现。
194+
🔴 **不 animate height**(§8.4 逐字 / R4.4 硬判据):本节不写 `height` / `max-height`,也不让任何
195+
`transition` / `animation` 指向它 —— 手段 = **两态叠在同一格**(隐藏层 `position: absolute` 浮起),
196+
容器高度由**在流**的那层给 ⇒ 相位切换高度**瞬跳、不插值**(58px 来自 LiveBar 的 `--ed-nav-h-live`,
197+
56px 来自 `TopBar.css` 的 `--ed-nav-h`)。
198+
⚠️ 源序:本节**必须在档位块之前**(① `responseSeams` 的 I-3「档位块与 reduced 块之间零规则块」;
199+
② `motion-coverage` 的名单从 reduced 块切到 EOF ⇒ 写在它之后的类名会被判**死条目**)。优先级本身
200+
不靠源序,靠 reduced 块的 `!important`(R18.1)。⚠️ 纯 `transition` 落点**进不了** reduced 名单
201+
(R48.1 的机制性缺口,T18 实证)⇒ 余量逐字登记在 T19 报告。 */
196202

197-
🔴 **不 animate height**(§8.4 逐字 / R4.4 的硬判据):本节**不写 `height` / `max-height`**,
198-
也不写任何 `transition` / `animation` 里的 `height` —— 交叉淡入只用 `opacity`。
199-
实现手段 = **两态叠在同一格**:两层同处一个容器,被隐藏的那层 `position: absolute` 浮起来;
200-
容器高度由**在流**的那一层给 ⇒ 相位切换时布局高度**瞬跳、不插值**(采集态 58px 来自 LiveBar 自己的
201-
`var(--ed-nav-h-live, 58px)`,常态/复习态 56px 来自 `TopBar.css` 的 `var(--ed-nav-h, 56px)`)。
203+
/* ① 叠层容器:定位参照物,**自身不写高度**(交给在流的那一层);`flex-shrink` 同 `.ed-topbar`。 */
204+
.shell-phase { position: relative; flex-shrink: 0; }
202205

203-
⚠️ **源序 = 本节写在档位块之前**(计划 Step 1 写的「档位块之后、reduced 块之前」**不可行**,两条独立
204-
机制各自把它排除,T19 实测):① `motion/responseSeams.test.ts` 的 I-3 要求档位块与 reduced 块之间
205-
**零规则块**(本块含 `{` ⇒ 插在那里必红);② `motion-coverage.test.ts` 的名单抽取是「从 reduced 块
206-
切到文件末尾」⇒ 写在 reduced 块**之后**的类名会被当成名单里的**死条目**(同样必红)。
207-
优先级本身不靠源序:reduced 块的每条声明都带 `!important`(R18.1 的承重机理)。
206+
/* ② 常态层(A′ 顶栏):常态与复习态都**留在流里**(复习态只把 opacity 归零 ⇒ 56px 基准保留,与页面既有
207+
的 `calc(100vh - var(--ed-nav-h))` 口径一致,切换时整页不跳);采集态才浮起来让位。 */
208+
.shell-phase__idle { transition: opacity var(--ed-dur-card, 220ms) var(--ed-ease, cubic-bezier(0.2, 0, 0, 1)); }
208209

209-
⚠️ 本节**不进 reduced-motion 名单**(R48.1 的机制性缺口,T18 已实证):名单只容纳「12 个基类 或
210-
在 `primitives/*.css` 里有 `animation:` 声明的选择器」,而本节是**纯 `transition` 落点** ⇒ 塞进名单
211-
会被判死条目;另起第二条 reduced 块会让 `style-seams.test.ts:201` 的「唯一一条」变成假话。
212-
⇒ 余量逐字登记(T19 报告 + 波 D 的「已知余量清单」),与 `ColumnResizer` 的行内余量同根因。 */
213-
214-
/* ① 叠层容器:定位参照物。**自身不写高度** —— 高度交给当下**在流**的那一层。 */
215-
.shell-phase {
216-
position: relative;
217-
/* 与 `.ed-topbar` 的 `flex-shrink: 0` 同款:壳层是列向 flex 容器,chrome 不许被内容压扁 */
218-
flex-shrink: 0;
219-
}
220-
221-
/* ② 常态层(A′ 顶栏):常态与复习态都**留在流里**(复习态只把 opacity 归零 ⇒ 56px 基准保留,
222-
与页面既有的 `calc(100vh - var(--ed-nav-h))` 口径一致,相位切换时整页不跳);采集态才浮起来让位。 */
223-
.shell-phase__idle {
224-
transition: opacity var(--ed-dur-card, 220ms) var(--ed-ease, cubic-bezier(0.2, 0, 0, 1));
225-
}
226-
227-
/* ③ 采集层(58px LIVE 仪表):默认浮在常态层之上且完全透明 ⇒「常态 → 采集」是淡入、「采集 → 常态」是
228-
淡出,两态在同一格里交叉。`pointer-events: none` 保证不可见的层不吃点击(键盘/无障碍面由
229-
`PhaseChrome` 的 `inert` 承担:那是 DOM 事实,jsdom 判得到;opacity 要等浏览器级联)。 */
210+
/* ③ 采集层(58px LIVE 仪表):默认浮在常态层之上且完全透明 ⇒ 两态在同一格里交叉淡入 / 淡出。
211+
`pointer-events: none` 保证不可见层不吃点击(键盘/无障碍面由 `PhaseChrome` 的 `inert` 承担)。 */
230212
.shell-phase__live {
231213
position: absolute;
232214
top: 0;
@@ -239,27 +221,13 @@ details[open] > summary { color: var(--ed-ink-1); }
239221

240222
/* ④ 采集态:LIVE 仪表**回到流里**(容器高度 = 它自己的 58px 契约),A′ 顶栏浮起并淡出。 */
241223
html[data-shell-phase="capture"] .shell-phase__idle {
242-
position: absolute;
243-
top: 0;
244-
left: 0;
245-
right: 0;
246-
opacity: 0;
247-
pointer-events: none;
248-
}
249-
250-
html[data-shell-phase="capture"] .shell-phase__live {
251-
position: static;
252-
opacity: 1;
253-
pointer-events: auto;
224+
position: absolute; top: 0; left: 0; right: 0; opacity: 0; pointer-events: none;
254225
}
226+
html[data-shell-phase="capture"] .shell-phase__live { position: static; opacity: 1; pointer-events: auto; }
255227

256-
/* ⑤ 复习态:**零 chrome** —— A′ 顶栏(含域导航)淡出即可,**列结构一格不动**。
257-
⚠️ 规格内部两说:§6.2 写「采集态整列隐藏」,§6.3 的相变态表写「源列保留(采集配置面)」
258-
⇒ 本任务按 **§6.3** 实现(源列保留、不写任何列 / 栅格规则;矛盾已并入 §三十四 交 T35 加注)。 */
259-
html[data-shell-phase="review"] .shell-phase__idle {
260-
opacity: 0;
261-
pointer-events: none;
262-
}
228+
/* ⑤ 复习态:**零 chrome**(A′ 顶栏含域导航淡出)+ **列结构一格不动** —— 规格 §6.2「采集态整列隐藏」
229+
与 §6.3「源列保留(采集配置面)」两说,本任务按 **§6.3** 实现(矛盾并入 §三十四 交 T35 加注)。 */
230+
html[data-shell-phase="review"] .shell-phase__idle { opacity: 0; pointer-events: none; }
263231
/* ▲▲▲ 相变态结束(T19)▲▲▲ */
264232

265233
/* ★ 强度三档(规格 §8.5 / R3.1)—— 本块写在下面 reduced-motion 块**之前**(源序),但优先级**不**

0 commit comments

Comments
 (0)