view-transition-group 不是合法属性或选择器；它源于对 view transitions api 的误解，该 api 仅支持 view-transition-name 属性和 ::view-transition-old()/::view-transition-new() 伪元素，须用 @keyframes + animation 控制动画。
view-transition-group 不是标准 HTML 或 CSS 中的合法属性或选择器，它根本不存在。你可能混淆了几个概念：CSS 的 transition、@keyframes + animation，以及 Chrome 111+ 引入的实验性新特性 —— View Transitions API（注意：它没有 -group 后缀，也不通过 CSS 类名或 HTML 属性配置）。
为什么 view-transition-group 会让人误以为存在？
部分开发者看到类似写法，比如：
<div view-transition-name="title">...</div>
或在 DevTools 中看到浏览器自动生成的伪元素类名如 view-transition-group，误以为这是可手动设置的 CSS 类。实际上：
-
view-transition-name是一个HTML 全局属性（仅限 Chrome/Edge Canary），用于标记参与视图过渡的元素； - 浏览器内部会生成临时的伪元素（如
::view-transition-old(title)和::view-transition-new(title)），但不暴露view-transition-group这类选择器供开发者直接使用； - 所有动画控制必须通过 CSS 的
@keyframes+animation，作用于这些伪元素。
如何真正控制 View Transition 的持续时间与缓动曲线？
你需要用 CSS 为浏览器生成的伪元素显式定义 animation，其中包含：
-
animation-duration（替代transition-duration） -
animation-timing-function（即“持续时间曲线”）
例如：
::view-transition-old(title),
::view-transition-new(title) {
animation: slide-fade 300ms ease-out;
}
@keyframes slide-fade {
from {
transform: translateX(0) scale(1);
opacity: 1;
}
to {
transform: translateX(-20px) scale(0.98);
opacity: 0.7;
}
}
关键点：
- 必须用
::view-transition-old(...)和::view-transition-new(...)伪元素选择器，不能用自定义类名或view-transition-group -
animation是唯一生效的方式；transition在 view transition 场景下完全无效 -
ease-out、cubic-bezier(0.2, 0, 0.1, 1)等 timing function 可照常使用，但必须写在@keyframes规则外的animation声明中
容易踩的坑
- 直接写
.my-group { view-transition-group: ... }→ 语法错误，CSS 解析失败 - 试图给
view-transition-name元素本身加transition→ 不触发视图过渡动画，只影响常规状态切换 - 忘记加
view-transition-name属性 → 浏览器不识别该元素参与过渡，伪元素根本不会生成 - 在非 Chromium 浏览器（如 Firefox、Safari）中启用该特性 → 当前（2026 年 5 月）仍无支持，代码会被忽略
View Transitions API 的动画控制权不在传统 CSS transition 上，而在于你能否精准命中那些由浏览器动态创建的伪元素，并用 animation 替代一切。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
