CSS prefers-reduced-motion 与 View Transitions 动效无障碍治理实践

核心价值基于 `prefers-reduced-motion` 按用户偏好减少或关闭动画，提升可访问性与输入稳定性。View Transitions 提供平滑的页面切换与组件过渡，并在降级时保持功能完整。组件动效治理.btn { transition: transform 200ms ease, opacity 200ms ease; } .btn:active { transform: scale(0.98); } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } .modal { animation: fadeIn 240ms ease both; } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } @media (prefers-reduced-motion: reduce) { .modal { animation: none; } } 页面切换协同const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches const nav = document.querySelectorAll('a[data-nav]') nav.forEach((a) => { a.addEventListener('click', (e) => { e.preventDefault() const href = a.getAttribute('href') if (!href) return if (!reduce && document.startViewTransition) { document.startViewTransition(() => { window.location.href = href }) } else { window.location.href = href } }) }) 治理建议对影响输入反馈的动效进行降级或删除，尤其是长列表与表单交互。页面切换使用 View Transitions 时尊重用户偏好，确保降级路径无阻塞。与 `@starting-style` 结合稳定首帧，避免进入动画导致的视觉跳变。结论动效的目标是提升理解与反馈而非炫技。通过 `prefers-reduced-motion` 与 View Transitions 的协同治理，可在不牺牲可访问性的前提下获得更流畅与稳定的体验。