reduce-motion 是一个面向无障碍(可访问性)场景的技能,用于为代码中已有的动画和过渡添加对 prefers-reduced-motion 媒体查询的支持。
用途 该技能针对代码中每一处动画(animation)和过渡(transition)进行处理,使页面能够响应用户系统层面的“减少动态效果”偏好设置,为对动态效果敏感的用户提供更友好的体验。
主要能力 根据提供的说明,该技能会执行以下操作:
- 将现有动画包裹在 @media (prefers-reduced-motion: no-preference) { } 媒体查询中。
- 添加 @media (prefers-reduced-motion: reduce) 媒体查询,并在其中设置:
- animation-duration: 0.01ms
- transition-duration: 0.01ms
- 保留最终状态,即不隐藏那些通过动画进入的内容。
- 测试页面在完全没有动态效果的情况下是否仍然完全可用。
使用方式 该技能以 /reduce-motion 的形式调用,作用于代码中已有的动画与过渡。具体安装命令、依赖或运行环境等细节暂未提供。
适用场景 适用于需要对现有前端代码进行无障碍改造、为动画和过渡添加减少动态效果支持的场景,尤其是希望在不破坏页面可用性的前提下满足 prefers-reduced-motion 偏好的项目。
限制 资料仅描述了该技能的处理逻辑与目标,未提供关于支持的技术栈、框架、安装方式、收费情况或具体使用步骤的更多信息,这些内容暂未提供。