CSS View Transitions 原生视图过渡与路由动画治理（2025）

# CSS View Transitions 原生视图过渡与路由动画治理（2025） ## 一、能力与场景 - View Transitions：在同域页面切换时自动捕获旧/新视图并生成过渡快照（页面过渡）。 - 场景：路由跳转、列表到详情、布局切换的平滑变换（路由动画）。 ## 二、实现与时序 - 触发：使用 `document.startViewTransition()` 包裹状态更新；在 CSS 中定义过渡选择器。 - 时序：控制进入/退出动画与关键帧；避免长任务阻塞（性能）。 ## 三、性能与降级 - 性能：限制过渡区域与层数；避免大面积重排与重绘。 - 降级：不支持浏览器采用无动画或简化动画；保持一致体验（可访问性）。 ## 四、可访问性与安全 - 可访问性：尊重“减少动画”系统设置；提供跳过动画的偏好。 - 安全：避免过渡泄露敏感信息；控制快照区域。 ## 注意事项 - 关键词（View Transitions、路由动画、页面过渡、性能、可访问性）与正文一致。 - 分类为“前端/CSS/动画”，不超过三级。 - 参数与策略需在真实页面与设备基线上验证。