::view-transition-group 不是标准伪元素，不可用于控制单个元素过渡；合法伪元素仅有 ::view-transition-old(name) 和 ::view-transition-new(name)，需配合 viewTransitionName 属性与 @keyframes 动画使用。
::view-transition-group 不是标准伪元素，不能用于控制单个元素的过渡动画参数——它根本不存在于 View Transitions API 规范中，也不被任何浏览器支持。
你看到的 ::view-transition-group（比如在 DevTools 里偶然出现、或某些 Svelte 示例中）是浏览器内部临时生成的调试类名或框架封装层的产物，不可手动编写、不可样式化、无法通过 CSS 选中并设置 animation 或 animation-duration。
真正能控制单个元素过渡行为的，只有两个合法且受支持的伪元素：
::view-transition-old(name) 和 ::view-transition-new(name)
- 它们由浏览器自动创建，前提是该元素在
document.startViewTransition()回调中被修改过，且其viewTransitionName属性（或view-transition-nameHTML 属性）有非空值 - 名称必须完全一致、区分大小写、不含空格或非法字符（如
card-detail✅，card detail❌） - 动画必须通过
@keyframes+animation显式定义，transition在这里完全无效
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 写了
::view-transition-group(card)却没任何效果 → 浏览器直接忽略该规则 - 把
animation写在.card类上，期待它影响过渡 → 不生效，必须作用于伪元素 - 使用
transition: opacity 300ms试图控制视图过渡 → 完全不触发，因为 View Transitions 不走 transition 通道
正确做法：
- 在 JS 中动态设置目标元素的
viewTransitionName，例如：el.viewTransitionName = 'user-avatar'; - 在 CSS 中只写这两条规则：
::view-transition-old(user-avatar), ::view-transition-new(user-avatar) { animation: avatar-slide 250ms cubic-bezier(0.2, 0, 0.1, 1); } - 确保
@keyframes avatar-slide定义了 from/to 状态（transform、opacity 等可动画属性）
性能与兼容性注意：
-
::view-transition-old()和::view-transition-new()是独立图层，频繁使用高开销属性（如filter: blur()）会影响帧率 - Chrome 111+ 支持，Edge 基于 Chromium 的版本也支持；Firefox / Safari 当前（2026年5月）仍无实现计划
- 若 name 值匹配失败（比如大小写不一致），浏览器会退回到默认淡入淡出，且不报错，极难调试
容易被忽略的一点：
伪元素的 stacking context 是独立的，如果过渡元素原本有 z-index 或父容器有 transform，可能导致 ::view-transition-old 图层被遮挡——此时需在伪元素上显式加 z-index: 9999 或调整父级层叠上下文。
