fix(webui): 回复球改成容器变形 + 摘掉邮件列表的入场动画 + 全局控件过渡不再补间阴影
用户连着报了三件(2026-09-15): ① 「邮件页面那个蓝色的圆形是聊天图标点击没有任何动画」 上一版我只给了回复框一个 150ms 的 opacity 淡入 —— 观感上等于没有。用户要的形态与 写信页一致:**球自己长成回复框**。现在蓝球带 data-morph-trigger、onClick 里就地记下 自己的矩形(currentTarget 最准),回复框挂载时用 useLayoutEffect 在**首帧之前**把 CSS 淡入关掉并接上 morph(220ms,只动 transform/opacity/border-radius)。 ② 「邮件列表会闪」——**我上一版引入的回归**。 我把 pane-rise 挂到了邮件列表上,而 view-switch 窗口在**选中一封邮件**时也会触发 (narrowPane 是依赖之一)⇒ 每点一封信整个列表重放一次入场。已摘掉:列表这类 "选中即变"的面不许挂入场动画,只有日历(真的换视图)保留 pane-rise。 判据改成反向的"列表必须不动",把这个回归钉死。 ③ 「主页点击按钮有明显的卡顿」。 全局 `button,a,input,textarea,select,[role=button]` 的 transition 里带了一条 `box-shadow var(--dur-base)` —— 阴影是**绘制**属性,每次 hover/active 都要把元素 连同阴影覆盖区重绘,且它挂在所有交互元素上。已去掉该补间(阴影瞬切), 判据钉"全局控件过渡不得含 box-shadow",个别表面仍可自己写。 另补一个真缺口:prefers-reduced-motion 原先只覆盖"窗口触发"那档,**没覆盖"挂载即播" 那档(裸 .rise-in)**,两处 morph 也没走这个开关。现已全部纳入;判据加严到"必须行首 就是 .rise-in"(第一版被 `html.view-switch .rise-in,` 满足掉,变异测试才发现假绿)。 判据合计 84 通过 0 失败(变异都验过:删裸 .rise-in → 红;把 box-shadow 加回 → 红; 列表挂回 pane-rise → 红;useLayoutEffect 换回 useEffect → 红)。
This commit is contained in:
@ -28,7 +28,8 @@ if (typeof document !== 'undefined') {
|
||||
const target = e.target as Element | null;
|
||||
// 优先取显式标记的入口;同一段布局里打开写信页的多半就是某个 button,
|
||||
// 所以退一步认最近的 button —— 这样 4 个入口不必逐个改(漏一个的后果是静默无动画)
|
||||
const el = target?.closest?.('[data-compose-trigger]') || target?.closest?.('button');
|
||||
const el =
|
||||
target?.closest?.('[data-compose-trigger], [data-morph-trigger]') || target?.closest?.('button');
|
||||
if (el) {
|
||||
origin = el.getBoundingClientRect();
|
||||
at = Date.now();
|
||||
@ -38,6 +39,16 @@ if (typeof document !== 'undefined') {
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 就地记下一个起点(给"点击处已经握着 currentTarget"的场景用,例如回复球:
|
||||
* 那儿不需要全局监听,onClick 里直接记下自己的矩形最准)。
|
||||
*/
|
||||
export function rememberOrigin(el: Element | null): void {
|
||||
if (!el) return;
|
||||
origin = el.getBoundingClientRect();
|
||||
at = Date.now();
|
||||
}
|
||||
|
||||
/** 只读:渲染期判断"这次有没有起点" */
|
||||
export function peekComposeOrigin(): DOMRect | null {
|
||||
return fresh(origin);
|
||||
|
||||
Reference in New Issue
Block a user