如何为Vue路由切换设置黑色背景的平滑过渡效果

要实现路由切换时黑色背景淡入淡出且不修改body蓝色背景的效果，核心是在过渡阶段添加一个覆盖视口的黑色背景层，与组件的淡入淡出动画同步。以下是具体实现：

修改模板结构 #

将路由组件包裹在容器内，同时添加固定定位的黑色背景层：

<RouterView #="{ Component }">
  <Transition mode="out-in" name="fade">
    <div class="fade-container" :key="route.path">
      <div class="fade-bg"></div>
      <component :is="Component" class="page-component" />
    </div>
  </Transition>
</RouterView>

更新CSS样式 #

通过Transition的自动类控制背景层和组件的过渡动画：

body {
  background-color: blue;
  margin: 0; /* 移除默认边距，避免背景层出现缝隙 */
}

.fade-container {
  position: relative;
  min-height: 100vh; /* 确保容器覆盖整个视口高度 */
}

.fade-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0;
  pointer-events: none; /* 禁止背景层拦截鼠标事件 */
  z-index: 1;
}

.page-component {
  position: relative;
  z-index: 2; /* 保证页面组件在背景层上方 */
}

/* 统一过渡动画时长和曲线 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.4s linear;
}

/* 组件的淡入淡出状态 */
.fade-enter-from .page-component,
.fade-leave-to .page-component {
  opacity: 0;
}

/* 过渡期间激活黑色背景的显示 */
.fade-enter-active .fade-bg,
.fade-leave-active .fade-bg {
  opacity: 1;
}

关键说明 #

• 背景层定位：.fade-bg使用fixed定位确保覆盖整个视口，不会随页面滚动移动。
• 层级控制：通过z-index保证页面组件在背景层上方，避免被黑色遮挡。
• 事件穿透：pointer-events: none确保背景层不会干扰页面组件的交互（如点击、输入等）。
• 过渡同步：利用Vue Transition的自动生成类，让背景层的透明度变化与组件的淡入淡出完全同步，填补路由切换时的body背景暴露间隙。

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