SuperAPI AI 工具集

reduce-motion

前端与建站

查看项目

更新于 10-16 06:03

技能介绍

reduce-motion 是一个面向无障碍(可访问性)场景的技能,用于为代码中已有的动画和过渡添加对 prefers-reduced-motion 媒体查询的支持。

用途 该技能针对代码中每一处动画(animation)和过渡(transition)进行处理,使页面能够响应用户系统层面的“减少动态效果”偏好设置,为对动态效果敏感的用户提供更友好的体验。

主要能力 根据提供的说明,该技能会执行以下操作:

  1. 将现有动画包裹在 @media (prefers-reduced-motion: no-preference) { } 媒体查询中。
  2. 添加 @media (prefers-reduced-motion: reduce) 媒体查询,并在其中设置:
    • animation-duration: 0.01ms
    • transition-duration: 0.01ms
  3. 保留最终状态,即不隐藏那些通过动画进入的内容。
  4. 测试页面在完全没有动态效果的情况下是否仍然完全可用。

使用方式 该技能以 /reduce-motion 的形式调用,作用于代码中已有的动画与过渡。具体安装命令、依赖或运行环境等细节暂未提供。

适用场景 适用于需要对现有前端代码进行无障碍改造、为动画和过渡添加减少动态效果支持的场景,尤其是希望在不破坏页面可用性的前提下满足 prefers-reduced-motion 偏好的项目。

限制 资料仅描述了该技能的处理逻辑与目标,未提供关于支持的技术栈、框架、安装方式、收费情况或具体使用步骤的更多信息,这些内容暂未提供。