如何仅为侧边栏应用View Transition（视图过渡）效果？

要实现仅侧边栏的视图过渡且无需JS触发，你需要调整CSS规则来隐藏默认的整页过渡，并确保仅命名元素参与过渡：

核心步骤与代码示例 #

1. 保留自动导航触发：继续使用@view-transition { navigation: auto; }让浏览器在点击<a>标签时自动触发过渡。
2. 隐藏默认整页过渡：浏览器默认会为整个页面创建名为root的视图过渡，通过隐藏它来取消整页效果。
3. 确保侧边栏过渡名称唯一且一致：所有页面的侧边栏元素必须使用相同的view-transition-name，且不能与其他元素重复。
4. 自定义侧边栏过渡动画：为旧状态和新状态的侧边栏设置动画效果。

完整CSS代码：

@view-transition {
  navigation: auto;
}

/* 隐藏默认的整页过渡根元素 */
::view-transition-root(root) {
  display: none;
}

/* 为侧边栏设置唯一过渡名称 */
.sidebar {
  view-transition-name: sidebar;
  /* 可选：确保元素具备稳定的布局上下文，避免过渡异常 */
  position: relative;
}

/* 自定义侧边栏退出动画 */
::view-transition-old(sidebar) {
  animation: sidebar-exit 0.3s ease-in-out forwards;
}

/* 自定义侧边栏进入动画 */
::view-transition-new(sidebar) {
  animation: sidebar-enter 0.3s ease-in-out forwards;
}

@keyframes sidebar-exit {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-100%); opacity: 0; }
}

@keyframes sidebar-enter {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

关键说明 #

• 隐藏::view-transition-root(root)是取消整页过渡的核心，因为这个元素默认覆盖整个视口，负责整页的淡入淡出效果。
• 所有页面的侧边栏必须使用相同的view-transition-name: sidebar;，浏览器会识别跨页面的同名元素并执行过渡。
• 无需调用JS的startViewTransition，navigation: auto;已经让浏览器在普通导航（点击<a>）时自动触发视图过渡。

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