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

iter(g283): 补旋转缩放过渡的减少动效兜底

Browse Source
This commit is contained in:
HIsheR
2026-10-26 23:09:40 +08:00
parent d0e408fae6
commit 0c5701512a
4 changed files with 29 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/tools/cli/bin/ua.js
+2 -2
View File
@@ -1718,9 +1718,9 @@ function cmdAuditMotion(args) {
console.error(`audit:motion 失败：${err.message}`);
process.exit(1);
}
const failing = result.gaps.length + result.shift.gaps.length; // 两类缺口都算失败：无限动画 + 悬停/按压位移
const failing = result.gaps.length + result.shift.gaps.length + result.spatial.gaps.length; // 三类缺口都算失败：无限动画 + 悬停/按压位移 + 旋转/缩放过渡
if (args.includes('--json')) {
console.log(JSON.stringify({ ok: failing === 0, total: result.total, failing, entries: result.entries, shift: result.shift }, null, 2));
console.log(JSON.stringify({ ok: failing === 0, total: result.total, failing, entries: result.entries, shift: result.shift, spatial: result.spatial }, null, 2));
} else {
console.log(formatMotionReport(result));
}
packages/tools/cli/lib/motion-audit.mjs
+15 -2
View File
@@ -59,7 +59,8 @@ export function auditMotion(root) {
);
const entries = infinite.flatMap((r) => splitSelectors(r.selector).map((selector) => ({ selector, covered: offline.has(selector) })));
const shift = auditShift(rules);
return { total: entries.length, entries, gaps: entries.filter((e) => !e.covered), shift };
const spatial = auditSpatial(rules);
return { total: entries.length, entries, gaps: entries.filter((e) => !e.covered), shift, spatial };
}
/*** 作用：悬停 / 按压位移的降级审计——逐个位移规则找对应降级，或以 ua- 通配写的全局归零规则兜底 ***/
@@ -75,13 +76,25 @@ function auditShift(rules) {
return { total: entries.length, entries, gaps: entries.filter((e) => !e.covered) };
}
/*** 作用：旋转 / 缩放过渡的降级审计——第三类空间动效，允许用一条通配 transition-property 收窄兜底 ***/
function auditSpatial(rules) {
const isSpatial = (body) => /transition[^;]*\b(rotate|scale|transform)\b/.test(body); // 过渡里提到旋转 / 缩放 / 变换的都算
// 兜底形态：减少动效块里用通配 ua- 类把 transition-property 收窄（只留颜色类属性）
const global = rules.some((r) => r.reduced && /transition-property\s*:/.test(r.body) && /\[class\^='?ua-'?\]|\[class\*='? ua-'?\]/.test(r.selector));
const entries = rules
.filter((r) => !r.reduced && isSpatial(r.body))
.flatMap((r) => splitSelectors(r.selector).map((selector) => ({ selector, covered: global })));
return { total: entries.length, entries, gaps: entries.filter((e) => !e.covered) };
}
/*** 作用：把审计结果打成文本表（人读模式） ***/
export function formatMotionReport({ entries, gaps, shift }) {
export function formatMotionReport({ entries, gaps, shift, spatial }) {
const lines = ['无限动画的减少动效兜底：'];
for (const e of entries) lines.push(` ${e.covered ? 'OK ' : 'MISS'} ${e.selector}`);
lines.push(gaps.length ? `缺兜底 ${gaps.length} 处：${gaps.map((g) => g.selector).join(' / ')}` : `全部 ${entries.length} 处无限动画都有 prefers-reduced-motion 兜底`);
lines.push('', '悬停 / 按压位移的减少动效兜底：');
const ok = shift.entries.filter((e) => e.covered).length;
lines.push(shift.gaps.length ? ` MISS 未归零 ${shift.gaps.length} 处：${shift.gaps.map((g) => g.selector).join(' / ')}` : ` 全部 ${ok} 处位移在减少动效下归零（悬停上浮 / 按压回缩）`);
lines.push('', '旋转 / 缩放过渡的减少动效兜底：');
lines.push(spatial.gaps.length ? ` MISS 未退化 ${spatial.gaps.length} 处：${spatial.gaps.map((g) => g.selector).join(' / ')}` : ` 全部 ${spatial.total} 处旋转 / 缩放过渡在减少动效下退化为瞬时（transition-property 收窄兜底）`);
return lines.join('\n');
}