CSS点击卡片全屏动画实现方法

<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));
}

• :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 尺寸查询。

理论要掌握，实操不能落！以上关于《CSS点击卡片全屏动画实现方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！