CSS点击卡片全屏动画实现方法-Golang学习网

它不支持跨 DOM 结构层级或尺寸差异过大的元素映射，比如从一个 width: 300px 的卡片，映射到整个 document.body 或新路由页——浏览器会静默降级为无动画切换，甚至抛出 TypeError: Failed to execute 'startViewTransition' on 'Document': No view transition is active。

真正可行的路径是：在**同一页面内**，用两个视觉状态（缩略态 + 展开态）共存，通过 viewTransitionName 绑定同一组可映射元素，再靠 CSS 控制显隐与布局变化。

如何写一个可映射的卡片/全屏双态结构

关键不是“切换页面”，而是“切换同一容器的两种视图”。推荐用单个

包裹两层：.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（继承自父级
），否则无法建立映射关系
不要给 .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));
}