View Transitions 与滚动驱动动画协同设计与冲突治理

View Transitions 与滚动驱动动画协同设计与冲突治理概述滚动驱动动画提供视图进度时间线，View Transitions 管理状态切换过渡。两者协同需避免样式覆盖与时间线竞争导致的闪烁。关键参数/概念`animation-timeline` 与 `view-timeline-name` 定义滚动驱动时间线。`view-transition-name` 为共享元素过渡标识。Firefox 在滚动驱动动画场景需要非零 `animation-duration`。实践/示例.subject { view-transition-name: subject } .subject { view-timeline-name: --subject } .reveal { animation-name: appear; animation-timeline: --subject; animation-fill-mode: both; animation-duration: 1ms } @keyframes appear { from { opacity: 0; transform: scale(.98) } to { opacity: 1; transform: scale(1) } } ::view-transition-old(subject), ::view-transition-new(subject) { animation: fade 160ms ease } @keyframes fade { from { opacity: 0 } to { opacity: 1 } } @media (prefers-reduced-motion: reduce) { .reveal { animation: none } ::view-transition-old(subject), ::view-transition-new(subject) { animation: none } } function withTransition(run) { const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches if (reduce || !document.startViewTransition) { run(); return } document.startViewTransition(() => run()) } 验证方法冲突检测：在滚动触发与状态切换同时发生时检查闪烁与样式覆盖。浏览器差异：在 Firefox 下确认动画应用需要的非零时长。指标与视感：采集 INP/LCP，并记录视觉一致性与用户反馈。注意事项先声明滚动时间线与关键帧，再声明过渡伪元素动画，避免覆盖。控制动画时长与缓动，减少与过渡叠加导致的视觉干扰。在减少动态效果偏好下禁用两类动画，保持信息可达。参考资料MDN: Scroll-driven animations 与 `animation-timeline`https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timelinehttps://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll-driven_animationsMDN: ViewTransition 与 `startViewTransition()`https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransitionhttps://developer.mozilla.org/en-US/docs/Web/API/ViewTransition