关于prefers-reduced-motion是否应禁用点击触发的细微动效的技术咨询

这个问题其实得从prefers-reduced-motion的设计初衷说起——它的核心目标是减少那些可能引发眩晕、不适的连续位移、平滑过渡类动效，而不是一刀切禁用所有视觉变化。咱们逐个看你代码里的细节：

一、closeButton的点击动效：无需禁用 #

你代码里的closeButton在active状态下，只是把×换成·，同时调整内阴影——这属于即时的状态反馈，没有连续的运动过程（比如没有transition动画），完全不属于“motion”的范畴。

这种反馈是在告诉用户“按钮确实被点击触发了”，属于友好的交互提示，即使在prefers-reduced-motion: reduce模式下保留也没问题，不会给用户带来不适。

二、header的点击动效：视情况判断 #

你设置的div.header:active时font-size从32px降到28px，同样是即时的属性变化，没有过渡动画的话，这也不属于需要禁用的“motion”。但如果之后你给这个大小变化加上了transition（比如transition: font-size 0.3s），那这个连续的缩放过程就属于motion范畴，此时就需要在reduce媒体查询里禁用这个变化：

@media (prefers-reduced-motion: reduce) {
  div.header:active {
    font-size: 32px; /* 保持原标题大小，禁用点击时的缩小变化 */
    /* 如果是加了transition的场景，也可以直接禁用过渡： */
    transition: none;
  }
}

核心判断原则 #

要不要禁用的关键，是看这个视觉变化是否是带有时间轴的连续运动/过渡：

• 如果是（比如页面元素滑动、淡入淡出、带过渡的缩放/位移）：必须在prefers-reduced-motion: reduce模式下禁用，避免引发用户不适；
• 如果是即时的状态切换（比如颜色突变、图标替换、无过渡的大小变化）：属于交互反馈，保留反而能帮助用户明确感知操作结果，完全可以保留。

额外适配建议 #

如果你的项目里还有其他带过渡/动画的元素，推荐用全局的reduce媒体查询统一禁用过渡和动画：

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

内容来源于stack exchange