当前位置：首页 > 文章列表 > 文章 > 前端 > CSS点击卡片全屏动画实现方法

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

2026-05-13 20:46:39 0浏览收藏

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 节点

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

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

包裹两层：.card（默认显示）和 .fullscreen（初始隐藏），共享 viewTransitionName：


  ...
  ...

然后在 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: ""; 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));
}