Vue3与Nuxt中pageTransition切换页面出现空白区域问题求助

问题分析 #

你遇到的空白区域问题主要来自两个原因：

• translateX 是视觉位移属性，仅改变元素视觉位置，不会修改其布局占位。当页面被移出视口时，页面容器会暴露超出视口范围的空白区域。
• 你的离开阶段动画逻辑错误：page-leave-from 设置为 translateX(-100%) 意味着页面初始状态就不在视口内，不符合正常的离开动画逻辑，反而会引发布局异常。

解决方案 #

按以下步骤修改代码即可解决：

1. 修正过渡动画的transform逻辑
   让进入、离开的动画路径符合预期：进入页面从右侧滑入，离开页面向左侧滑出。

2. 给页面容器添加overflow:hidden
   强制容器裁剪超出视口的内容，避免空白区域暴露。

3. 给过渡页面设置定位
   让切换的两个页面在过渡时重叠渲染，避免布局偏移。

修正后的完整代码 #

<template>
  <NuxtLayout class="page-container">
    <NuxtPage class="page-content" />
  </NuxtLayout>
</template>

<style>
/* 页面容器：占满视口并裁剪超出内容 */
.page-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* 页面内容：绝对定位确保过渡时页面重叠 */
.page-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 过渡动画基础配置 */
.page-enter-active,
.page-leave-active {
  transition: transform 0.4s linear;
}

/* 进入动画：从右侧滑入 */
.page-enter-from {
  transform: translateX(100%);
}
.page-enter-to {
  transform: translateX(0);
}

/* 离开动画：向左侧滑出（修正原逻辑错误） */
.page-leave-from {
  transform: translateX(0);
}
.page-leave-to {
  transform: translateX(-100%);
}
</style>

额外说明 #

• 无需额外设置opacity，位移动画已能清晰体现切换效果，多余的透明度属性可能引发过渡冲突。
• page-container设置100vw/100vh是为了确保容器占满整个视口，避免因内容高度不足导致的空白。
• 绝对定位的page-content让所有页面在同一位置渲染，过渡时不会出现布局跳动。

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