怎么通过HTML的CSS的::view-transition-group伪元素控制单个元素的过渡动画参数-html教程-PHP中文网

::view-transition-group 不是标准伪元素，不可用于控制单个元素过渡；合法伪元素仅有 ::view-transition-old(name) 和 ::view-transition-new(name)，需配合 viewtransitionname 属性与 @keyframes 动画使用。

怎么通过html的css的::view-transition-group伪元素控制单个元素的过渡动画参数

::view-transition-group 不是标准伪元素，不能用于控制单个元素的过渡动画参数——它根本不存在于 View Transitions API 规范中，也不被任何浏览器支持。

你看到的 ::view-transition-group（比如在 DevTools 里偶然出现、或某些 Svelte 示例中）是浏览器内部临时生成的调试类名或框架封装层的产物，不可手动编写、不可样式化、无法通过 CSS 选中并设置 animation 或 animation-duration。

真正能控制单个元素过渡行为的，只有两个合法且受支持的伪元素：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

`::view-transition-old(name)` 和 `::view-transition-new(name)`

它们由浏览器自动创建，前提是该元素在 document.startViewTransition() 回调中被修改过，且其 viewTransitionName 属性（或 view-transition-name HTML 属性）有非空值
名称必须完全一致、区分大小写、不含空格或非法字符（如 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 或调整父级层叠上下文。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！