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 的协同治理，可在不牺牲可访问性的前提下获得更流畅与稳定的体验。