CSS如何实现点击卡片全屏展开动画_初探View Transitions API跨元素映射-css教程-PHP中文网

view transitions api 仅支持同一页面内同名、同级或嵌套的 dom 节点间过渡，需用单容器包裹缩略态与展开态并共享 viewtransitionname，通过 aria-hidden 切换状态，动效必须使用 :view-transition-* 伪类和 @property 控制。

css如何实现点击卡片全屏展开动画_初探view transitions api跨元素映射

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></article> 包裹两层：.card（默认显示）和 .fullscreen（初始隐藏），共享 viewTransitionName：

<article viewtransitionname="card-123"><div class="card">...</div>
  <div class="fullscreen" aria-hidden="true">...</div>
</article>

然后在 JS 中触发时，仅切换 aria-hidden 和 CSS 类：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

document.startViewTransition(() => {
  cardEl.querySelector('.card').setAttribute('aria-hidden', 'true');
  cardEl.querySelector('.fullscreen').removeAttribute('aria-hidden');
});

aria-hidden 比 display: none 更安全——它保留盒模型，不影响 View Transitions 的几何计算
两个子元素必须有相同 viewTransitionName（继承自父级 <article></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));
}</number>