为什么Transitions.dev的每段过渡都内置prefers-reduced-motion:UI动效无障碍清单

为什么Transitions.dev的每段过渡都内置prefers-reduced-motion:UI动效无障碍清单【免费下载链接】transitions.devUI montion AI agent, a library of 43 crafted transitions, a skill that fits your workflow.项目地址: https://gitcode.com/gh_mirrors/tr/transitions.devTransitions.dev 是一个收录 43 个精调 UI 过渡动画的开源库它最容易被忽视、却最值得学习的一点是每一段过渡片段都自带prefers-reduced-motion守护块让前庭障碍和晕动症用户也能安心使用。本文面向新手讲清楚这个系统媒体查询是什么、它如何在 Transitions.dev 的 CSS 与 JS 两层落地并附上一份可直接照做的 UI 动效无障碍清单。prefers-reduced-motion 是什么新手 30 秒入门prefers-reduced-motion是浏览器提供的一个媒体查询它读取用户操作系统里的减少动态效果开关 macOS / iOS系统设置 → 辅助功能 → 显示 → 减少动态效果 Windows设置 → 辅助功能 → 视觉效果 → 关闭动画效果 Android开发者选项 → 窗口动画缩放调至 0.5x 以下或无障碍设置当用户开启该选项时media (prefers-reduced-motion: reduce)内的规则就会生效。这对前庭障碍用户至关重要——快速闪烁、旋转、大幅位移的动画可能引发眩晕、恶心甚至偏头痛而很多开发者根本不知道网站上有这一类隐形用户。核心思想动效是增强不是前提。用户有权一键关闭它而功能必须完整保留。为什么 Transitions.dev 的每段过渡都默认带守护在 Transitions.dev 上每张过渡卡片都有一个复制按钮。官方 README.md 说明了复制出来的片段包含什么语义化的:rootCSS 变量、命名空间化的t-*过渡规则以及一个media (prefers-reduced-motion: reduce)守护块——粘贴进任何项目即可用。也就是说无障碍守护不是可选配置而是片段的出厂标配。以 transitions/modal-open-close/index.html 中的模态框为例守护块只有三行media (prefers-reduced-motion: reduce) { .t-modal { transition: none !important; } }效果开启减少动态效果的用户打开模态框时弹窗瞬间出现、瞬间关闭但pointer-events与状态切换逻辑完全不受影响——功能一分不少。更值得新手注意的是配套的 AI 技能文档 skills/transitions-dev/SKILL.md 把保留守护块写成了硬性规则保留media (prefers-reduced-motion: reduce)块。每个片段都自带它。删掉它会让组件无法通过无障碍审计。这意味着即使是 AI 帮你写代码守护块也不会被顺手优化掉。守护怎么落地CSS 和 JS 各管一半光靠 CSS 媒体查询还不够——很多过渡需要 JS 控制时序比如关闭动画播完后才移除元素。Transitions.dev 的解法是双层守护第一层CSS关掉 transition 和 animation如骨架屏加载 agent/test/components/skeleton/skeleton.cssmedia (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }第二层JS读取matchMedia把等待动画的定时器直接归零。参考 agent/test/components/modal-tuned/main.jsxconst closeMs window.matchMedia((prefers-reduced-motion: reduce)).matches ? 0 : parseFloat(...) || 150;如果 JS 不查这个开关动画没了但setTimeout还在等 150ms——用户会看到弹窗卡一下才消失。这一层细节恰恰是新手最容易漏掉的。项目级兜底还有一种更省事的写法见测试基线 agent/test/fixtures/good.cssmedia (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }一行覆盖全站所有动画用 0.01ms 而非 0是为了不破坏依赖动画结束事件的回退逻辑。Agent 自动扫描漏掉守护块会被点名Transitions.dev 不只是自带守护它还内置了一个 UI motion agentagent/README.md能扫描你的整个代码库并给出动效评分。其中一条规则就叫no-reduced-motion实现在 agent/lib/rules.mjs规则触发条件严重级别no-reduced-motion项目里有动画却从未检查 prefers-reduced-motionwarn它给出的提示是写给普通人看的见 agent/README.md项目有动画但从未检查 prefers-reduced-motion。在系统里关闭了动效的用户依然会看到完整动画。请加一个媒体查询守护。修复路径也很友好npx transitions-agent fix的默认 polish 模式会自动为动画补上prefers-reduced-motion守护块且承诺只动动效、不碰逻辑。安装路径Skill 与 CLI 两种姿势如果你不想手抄片段项目提供两条安装路径均基于 skills/transitions-dev/ 目录下的技能文件Agent Skillnpx skills add Jakubantalik/transitions.dev让 Cursor、Claude Code 等 AI 工具直接在你的项目里应用过渡。技能入口见 skills/transitions-dev/SKILL.md⌨️CLInpx transitions-dev add card-resize一条命令拉取任意过渡--free可一次装齐全部免费过渡️ 统一变量块导入一次 skills/transitions-dev/_root.css即可引用--duration-*、--ease-*等全套 motion tokensUI 动效无障碍清单6 步自查你的网站对照下面的清单逐项检查你的动效是否对晕动症用户友好 ✅每个动画组件都有守护块——transition: none或animation: none至少覆盖模态框、下拉菜单、Toast、骨架屏这四大高频组件循环动画给静态兜底——shimmer、骨架屏脉冲、彩带这类infinite动画关掉后元素仍需可读背景色/占位仍在JS 时序同步归零——所有setTimeout等待动画结束的逻辑都要经matchMedia((prefers-reduced-motion: reduce))判断加一条全站兜底规则——* { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }防止遗漏的边角动画功能与动效解耦——关闭动画后开合状态、焦点管理autoFocus、roledialog依然完整接入自动检查——用npx transitions-agent跑一次扫描no-reduced-motion规则会替你揪出漏网之鱼还可配--min-score进 CI 把关写在最后动效做得多是能力做得克制才是专业。Transitions.dev 把prefers-reduced-motion作为每个片段的出厂设置等于给新手树立了一个标准答案无障碍不是上线前的补丁而是动效设计的第一行代码。把这份 6 步清单存下来下次写 transition 之前先对照一遍——你的前庭障碍用户会感谢你的。【免费下载链接】transitions.devUI montion AI agent, a library of 43 crafted transitions, a skill that fits your workflow.项目地址: https://gitcode.com/gh_mirrors/tr/transitions.dev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考