feat(canvas): 动效系统与响应式适配 - token落地+断点体系+无障碍 #99
基于 Wayfinder #99 决议,完成动效/响应式/无障碍三大维度落地: 1. 动效 token 迁移(CSS 动画) - 33 处 easing 替换为 var(--motion-ease-out/in-out/linear) - 7 处有限动画 duration 替换为 var(--motion-dur-*-calc) (含 motion-scale 降级,自动联动 prefers-reduced-motion) - canvas-node batch 动画内联值替换为 token 2. aceternityMotion 对齐 + motion/react 硬编码替换 - 添加 JS↔CSS token 映射文档注释 - 3 处 motion/react 硬编码 duration 替换为 aceternityMotion.* 引用 3. infinite 装饰动画 reduced-motion 降级 - L1 (prefers-reduced-motion): 缩短至 0.01ms + 单次播放 - L2 (.no-motion): animation: none 完全禁用 - 覆盖 9 个 infinite 动画类(连线流光/边框流光/极光标题等) 4. 响应式断点体系 - @theme 新增 3 断点 token: --breakpoint-tablet(768)/desktop(1024)/wide(1440) - 修复 canvas-toolbar 外观面板缺 max-w 导致移动端溢出 5. 无障碍 - 画布页新增 skip-to-content 链接(键盘用户跳过侧栏直达画布) - 任务进度面板 aria-live="polite"(屏幕阅读器播报任务数变化) Closes #99
This commit is contained in:
@@ -380,7 +380,7 @@ export const CanvasNode = React.memo(function CanvasNode({
|
||||
"--batch-from-x": `${batchMotion?.x || 0}px`,
|
||||
"--batch-from-y": `${batchMotion?.y || 0}px`,
|
||||
"--batch-from-rotate": `${6 + (batchMotion?.index || 0) * 4}deg`,
|
||||
animation: data.metadata?.batchRootId ? (batchClosing ? "canvas-batch-child-out 260ms cubic-bezier(.4,0,.2,1) both" : "canvas-batch-child-in 340ms cubic-bezier(.2,.85,.18,1) both") : undefined,
|
||||
animation: data.metadata?.batchRootId ? (batchClosing ? `canvas-batch-child-out var(--motion-dur-base-calc) var(--motion-ease-in-out) both` : `canvas-batch-child-in var(--motion-dur-slow-calc) var(--motion-ease-out) both`) : undefined,
|
||||
animationDelay: data.metadata?.batchRootId ? `${batchClosing ? 0 : 45 + (batchMotion?.index || 0) * 24}ms` : undefined,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user