<p>View Transitions API 仅支持同一页面内同名、同级或嵌套的 DOM 节点间过渡，需用单容器包裹缩略态与展开态并共享 viewTransitionName，通过 aria-hidden 切换状态，动效必须使用 :view-transition-* 伪类和 @property 控制。</p>
View Transitions API 不能直接映射“卡片 → 全屏页面”
它不支持跨 DOM 结构层级或尺寸差异过大的元素映射，比如从一个 width: 300px 的卡片，映射到整个 document.body 或新路由页——浏览器会静默降级为无动画切换，甚至抛出 TypeError: Failed to execute 'startViewTransition' on 'Document': No view transition is active。
真正可行的路径是：在**同一页面内**，用两个视觉状态（缩略态 + 展开态）共存，通过 viewTransitionName 绑定同一组可映射元素，再靠 CSS 控制显隐与布局变化。
- 必须确保展开前后，参与过渡的元素都存在于 DOM 中（哪怕
display: none） - 卡片容器和全屏容器需有明确、稳定的
viewTransitionName值，且前后一致 - 避免对
body或路由级组件设viewTransitionName——它只认「可复用的、具名的、同级或嵌套的」DOM 节点
如何写一个可映射的卡片/全屏双态结构
关键不是“切换页面”，而是“切换同一容器的两种视图”。推荐用单个 <article> 包裹两层：.card（默认显示）和 .fullscreen（初始隐藏），共享 viewTransitionName：
<article viewTransitionName="card-123"> <div class="card">...</div> <div class="fullscreen" aria-hidden="true">...</div> </article>
然后在 JS 中触发时，仅切换 aria-hidden 和 CSS 类：
立即学习“前端免费学习笔记（深入）”；
document.startViewTransition(() => {
cardEl.querySelector('.card').setAttribute('aria-hidden', 'true');
cardEl.querySelector('.fullscreen').removeAttribute('aria-hidden');
});-
aria-hidden比display: none更安全——它保留盒模型，不影响 View Transitions 的几何计算 - 两个子元素必须有相同
viewTransitionName（继承自父级<article>），否则无法建立映射关系 - 不要给
.card和.fullscreen单独设viewTransitionName，API 不识别子元素独立命名
CSS 动画控制依赖 :view-transition-* 伪类
浏览器会自动为参与过渡的元素生成临时影子节点，用 :view-transition-group、:view-transition-image 等伪类接管样式。你不能靠 .card.active 这类自定义类控制过渡帧。
典型写法：
@property --scale { syntax: "<number>"; inherits: false; initial-value: 1; }
:root:has(.card[aria-hidden="true"]) .card {
--scale: 0.9;
}
:root:has(.fullscreen:not([aria-hidden])) .card {
--scale: 0.1;
}
:root::view-transition-group(card-123) {
transform: scale(var(--scale));
}-
:view-transition-group(...)匹配的是viewTransitionName值，不是 class 名 - 过渡期间，原始元素被移入影子树，原 CSS 类失效；所有动效必须走
::view-transition-*伪类 -
@property是必须的——直接写transform: scale(0.1)会被忽略，因为不支持插值
Chrome 111+ 才支持，且需开启实验性标志
当前（2024 年中）仅 Chromium 内核稳定支持，Firefox 和 Safari 仍为草案阶段。本地测试前务必确认：
- Chrome 版本 ≥ 111
- 访问
chrome://flags/#view-transitions，启用该 flag - 页面需部署在 HTTPS 或
localhost（file://协议下完全禁用） - 服务端若用 SSR，需确保首屏 HTML 已包含双态 DOM，否则 hydration 后补节点将无法参与首次过渡
最易被忽略的一点：View Transitions 的映射逻辑极度依赖 layout stability——任何导致重排的 JS 操作（如读取 offsetHeight）都可能打断过渡流程，让动画卡在中间帧。能用 CSS 控制的，绝不碰 DOM 尺寸查询。
