使用all: unset后如何恢复View Transitions API的默认淡入淡出效果？

问题根源 #

你的CSS重置代码里的all: unset会命中所有符合选择器的元素，包括View Transitions API的核心伪元素——::view-transition-old(root)和::view-transition-new(root)，直接清空了它们的默认动画、透明度等关键属性，导致全局淡入淡出过渡失效。你之前尝试的*::view-transition-old()写法没有精准定位到根视图过渡元素，因此无法解决问题。

修复代码 #

在你的CSS重置代码之后添加以下样式，即可恢复默认过渡效果：

/* 恢复根视图过渡伪元素的默认样式 */
::view-transition-old(root),
::view-transition-new(root) {
  all: revert;
  animation-duration: 0.5s;
}

/* 确保过渡容器的默认行为不受CSS重置干扰 */
::view-transition-group(root),
::view-transition {
  all: revert;
}

代码说明 #

• ::view-transition-old(root)和::view-transition-new(root)是全局页面过渡的核心伪元素，all: revert会将它们的样式还原为浏览器默认值，再显式指定animation-duration保证过渡时长符合预期。
• 额外重置::view-transition-group(root)和::view-transition，是为了确保整个视图过渡容器的样式不会被你的CSS重置代码影响。

验证方式 #

将这段样式放在CSS重置代码之后，再调用document.startViewTransition(() => router.push({name: 'Index'}))进行测试，即可看到页面恢复默认的淡入淡出过渡效果。

内容的提问来源于stack exchange，提问作者user13929140