切换页面幻灯片时出现空白屏幕

Question

vue3 和 nuxt 中使用的 pageTransition。

当我转到下一页时，我将屏幕切换到translateX。

但是，随着屏幕的移动，会出现与translateX的值一样多的空白空间。

我想解决这个问题。

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<style>
.page-enter-active,
.page-leave-active {
  transition:transform 0.4s linear;
}
.page-enter-from {
  transform: translateX(100%);
}

.page-enter-to {
  opacity: 1;
  transform: translateX(0);
}
.page-leave-from {
  opacity: 1;
  transform: translateX(-100%);
}
.page-leave-to {
  opacity: 0;
  transform: translateX(0);
}
</style>

Answer 1

我会尝试将

transition:transform 0.4s linear;

替换为

ease

<style>
.page-enter-active,
.page-leave-active {
  transition: transform 0.4s ease;
}
.page-enter-from {
  opacity: 0;
  transform: translateX(100%);
}

.page-enter-to {
  opacity: 1;
  transform: translateX(0);
}
.page-leave-from {
  opacity: 1;
  transform: translateX(0);
}
.page-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}
</style>

并检查空白区域，在转换过程中阻止水平滚动问题，方法是：

body {
  overflow-x: hidden;
}