# 1. View Transitions API（Chrome 111+）的单页应用路由动画，原生 SPA 过渡替代 framer-motion 的工程取舍？ A View Transitions 以浏览器快照机制零成本实现页面级过渡，不支持时自动降级，framer-motion 保留给元素级精细编排场景 ✓ 正确答案 B 使用 View Transitions 后 framer-motion 将无法工作 C View Transitions 无法实现任何自定义动画 D View Transitions 只在 Chrome 111 之后可用且无法检测降级
# 2. @starting-style 与 transition-behavior: allow-discrete 实现 display 切换的入场/离场过渡，及与 View Transitions 的分工 A display 属性永远无法参与过渡 B allow-discrete 只能用于元素离场，入场必须用 JS C @starting-style 与 View Transitions 功能完全重叠 D allow-discrete 让 display 参与离散过渡，@starting-style 定义元素进入渲染的起始样式，二者解决元素级进出场，页面级切换仍用 View Transitions ✓ 正确答案
# 3. View Transitions 的跨文档（MPA）与同文档（SPA）模式原理，浏览器如何生成过渡快照？ A 跨文档模式需要源页面调用 startViewTransition B 同文档模式由 startViewTransition 捕获新旧快照，跨文档模式由目标页声明 @view-transition 后浏览器在导航提交时接管捕获，过渡都是渲染层快照间动画 ✓ 正确答案 C 快照过渡是真实 DOM 节点的动画 D 跨文档模式不支持自定义伪元素动画
# 4. Cross-document View Transitions 实现 MPA 间过渡，与 Astro / Qwik 等多页框架的协同 A MPA 页面必须用 JS 手动捕获快照才能过渡 B 跨文档过渡会阻塞新页面脚本执行 C 每页声明 @view-transition 后浏览器在导航时自动执行快照过渡，同名 view-transition-name 元素跨页配对做共享动画，框架无需改动 ✓ 正确答案 D Astro/Qwik 不支持跨文档过渡
# 5. 如何为 View Transitions 指定过渡元素（view-transition-name）并处理异步内容（图片加载）？ A view-transition-name 唯一命名使元素被独立捕获并隐式隔离，更新回调中先 await 图片 decode 与字体加载再更新 DOM，避免新快照不完整 ✓ 正确答案 B 图片加载不影响 View Transitions 快照 C 任意多个元素可以使用同一个 view-transition-name D 未命名的元素不会出现在过渡中
# 6. View Transitions 与 FLIP 动画方案的对比，适用场景、性能与降级策略？ A FLIP 由浏览器自动完成测量与插值 B FLIP 手工测量并播放 transform 动画，适合元素级布局动画；View Transitions 自动捕获快照，适合页面级切换，两者都应以无动画降级为底线 ✓ 正确答案 C View Transitions 只能做淡入淡出，无法做位移动画 D FLIP 动画无法被 View Transitions 替代，二者互斥
# 7. View Transitions 与 SPA 路由框架（React/Vue）的集成，如何用 navigate 事件或框架适配器触发过渡？ A 异步数据请求必须放进 startViewTransition 回调内 B 路由框架必须内置 View Transitions 支持才能使用 C 通过把路由更新包进 startViewTransition 或拦截 Navigation API 的 navigate 事件即可触发过渡，框架适配器只是封装该模式 ✓ 正确答案 D navigate 事件无法被 preventDefault 拦截
# 8. View Transitions 的降级策略，不支持浏览器（Firefox/Safari 旧版）时的回退动画如何优雅实现？ A 不支持 View Transitions 的浏览器必须引入 polyfill 才能使用 B 能力检测必须在服务端完成 C 降级后页面功能会受限 D 通过能力检测分层降级：有 API 用快照过渡，无 API 直切或加 CSS 回退动画，业务逻辑不依赖过渡生命周期 ✓ 正确答案
# 9. ViewTransition 的生命周期 Promise（updateCallbackDone/ready/finished）与 transition 事件在动画编排与失败处理的工程应用？ A updateCallbackDone 表示回调完成、ready 表示新快照就绪、finished 表示过渡结束，可用 Promise.race 加超时并显式处理回调抛错 ✓ 正确答案 B 三个 Promise 在同一时刻全部 resolve C finished resolve 表示更新回调一定成功 D 过渡失败时 finished 永远不 resolve
# 10. scroll-driven animations，animation-timeline 的 scroll()/view() 实现滚动进度动画与合成性能边界 A scroll() 把进度绑定到元素进入视口的可见度 B view() 无法配合 animation-range 使用 C scroll() 绑定滚动容器进度、view() 绑定元素视口可见度，animation-range 限定区间，动画在合成器线程执行但只有 transform/opacity 等可合成属性受益 ✓ 正确答案 D scroll-driven animations 必须由主线程逐帧计算
# 11. view-transition-name 隐式施加 contain 对元素布局与快照裁剪的影响（大元素截断排查） A 快照会包含元素全部溢出内容 B view-transition-name 不会改变元素渲染行为 C 大元素截断只能用 transform 修复 D 命名元素被隐式 contain 隔离，快照限制在元素边界盒内，阴影与溢出内容会被裁剪，排查时应确认命名范围与元素边界 ✓ 正确答案
# 12. SSR/CSR 下 View Transitions 的兼容性处理与无障碍（prefers-reduced-motion）适配？ A reduced-motion 偏好下仍应播放完整动画以保证体验一致 B 屏幕阅读器需要朗读过渡动画细节 C SSR 下服务端会执行 startViewTransition D 能力检测在客户端运行时执行（SSR 注水后启用），prefers-reduced-motion 下关闭或缩短动画，并保证过渡后焦点管理不受影响 ✓ 正确答案
# 13. 过渡与懒加载内容，图片/字体加载未完成时快照不同步的问题，如何用 transitionend/等待资源解决？ A 快照一定在资源加载完成后才捕获，无需处理 B 更新回调内先 await 关键图片 decode 与字体就绪再更新 DOM，过渡结束后用 transitionend 触发后续加载，并设超时兜底 ✓ 正确答案 C 懒加载资源应全部取消以保证快照一致 D transitionend 用于触发资源加载开始
# 14. 与 FLIP 动画的对比，性能与适用场景？ A FLIP 动画由主线程逐帧计算 transform B FLIP 无法使用合成器优化 C View Transitions 更适合高频拖拽排序 D FLIP 适合同页少量元素的布局变化（测量开销在布局阶段），View Transitions 适合视图级低频切换（快照内存开销大），两者可分层共存 ✓ 正确答案
# 15. 无障碍与减少动画偏好（prefers-reduced-motion）？ A reduced-motion 偏好只影响系统动画，不影响网页动画 B 通过 CSS 媒体查询覆盖动画时长与 JS 检测跳过过渡双重处理，并保证过渡后焦点管理，动画不改变页面切换的语义信息 ✓ 正确答案 C 开启 reduced-motion 后 View Transitions 会抛错 D 焦点管理由浏览器自动完成，无需关注
# 16. View Transitions 的兼容与降级，不支持浏览器的回退？ A 所有现代浏览器都支持同文档 View Transitions B 通过能力检测实现无动画直切、CSS 简易动画可选回退，业务逻辑不依赖过渡生命周期，polyfill 只能近似模拟同文档模式 ✓ 正确答案 C 跨文档过渡有成熟的官方 polyfill D 不支持浏览器必须引入 polyfill 才能正常工作
# 17. View Transitions 与路由框架的集成？ A 只能在 React 中使用 View Transitions B 集成时必须把数据请求放进过渡回调 C 过渡回调可以无限期挂起 D Vue/SvelteKit/React 各有集成模式，共同点是包装 DOM 更新；常见坑是回调内做异步请求、连续导航重复触发与水合期调用 ✓ 正确答案
# 18. View Transitions 的伪元素结构（::view-transition、::view-transition-group/new/old）与动画参数（duration/easing）的自定义方式？ A 伪元素树只有根节点，无法区分命名组 B 过渡时生成 ::view-transition 根、按命名分组的 group 与承载新旧快照的 old/new 伪元素，通过覆盖动画属性或替换 keyframes 自定义动画 ✓ 正确答案 C 默认动画无法被修改 D old/new 伪元素可以同时操作真实 DOM 节点
# 19. View Transitions 性能调优，减少 layout shift 与 paint 的最佳实践 A 更新回调内尽量小范围变更 DOM、动画只用 transform/opacity 等合成属性、预置媒体尺寸并预加载资源，从捕获与动画两端降本 ✓ 正确答案 B 快照捕获是零成本的渲染操作 C 动画期间修改 layout 属性是推荐的性能优化 D 命名元素越多性能越好
# 20. startViewTransition 中断编排，新过渡打断旧过渡时的快照替换时序与闪烁规避 A 新过渡会等待旧过渡完成后再开始 B 新 startViewTransition 会取消进行中的过渡并以中间帧为新旧快照，通过导航串行化、取消感知清理与缩短过渡窗口规避闪烁 ✓ 正确答案 C 过渡一旦开始就不可取消 D 被打断时旧快照一定保留
