CSS View Transitions：页面过渡要连续，也要可控
一、转场不是加一层动画
View Transitions API 让页面状态变化可以获得更连续的视觉过渡。它适合列表到详情、主题切换、局部布局变化等场景。但转场不是给页面加一层炫技动画，而是帮助用户理解状态如何变化。
如果转场遮挡任务、拖慢反馈或让焦点丢失，它就不是体验提升。
二、先确定过渡对象
flowchart TD A[状态变化] --> B[共享元素] A --> C[进入元素] A --> D[离开元素] A --> E[焦点位置]不要把整页都丢进过渡。共享元素越明确，用户越容易理解页面关系。列表卡片进入详情页时，可以只让封面、标题和容器产生连续感。
.article-card { view-transition-name: article-card; } ::view-transition-group(article-card) { animation-duration: 260ms; }命名要稳定，避免多个元素使用同一个 transition name。
三、控制时长和降级
View Transitions 需要考虑浏览器支持和用户偏好。对于prefers-reduced-motion，应该降低或关闭过渡，避免让敏感用户不适。
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*) { animation-duration: 1ms; } }同时要注意历史导航。返回上一页时，转场方向、滚动位置和焦点恢复都要符合预期。
四、避免布局和性能陷阱
过渡期间如果大量元素参与截图和合成，性能会下降。复杂阴影、滤镜、视频、超大图片都可能带来开销。上线前要用性能面板观察主线程和合成层。
transition_checklist: shared_elements_limited: true reduced_motion_supported: true focus_restored: true no_large_filter_animation: true还要避免转场掩盖真实加载。数据还没回来时，不要用漂亮动画假装页面已经完成。可以先转场到稳定骨架，再补充内容，减少视觉突变。
最后，View Transitions 更适合表达空间连续，不适合所有交互。按钮点击反馈、表单校验、局部状态切换，普通 CSS transition 可能更简单。
在单页应用里，还要处理路由状态。转场开始前记录当前页面的关键元素，路由完成后再匹配新页面元素。如果中途取消导航或权限校验失败，过渡应该能中止，而不是留下半透明截图。
if (document.startViewTransition) { document.startViewTransition(async () => { await navigate(nextUrl); }); } else { await navigate(nextUrl); }共享元素的命名也要避免动态冲突。列表里每张卡片都要根据稳定 ID 生成名称，而不是统一叫card。否则浏览器无法判断哪一个旧元素对应哪一个新元素。
最后，转场要配合内容加载策略。对于详情页，可以先展示标题和骨架，图片延迟进入；对于设置页，转场结束后应立即恢复可操作状态。连续感服务的是理解，不是把等待包装得更久。
五、总结
CSS View Transitions 要明确共享元素、控制时长、支持降级、恢复焦点并关注性能。
页面过渡要连续，也要可控。好的转场帮助理解变化，而不是制造注意力负担。
