基于CSS的页面过渡：为项目添加SPA风格全屏过渡遇阻

阿华AIGC实验室

2026-5-19

嘿，我太懂这种想做出丝滑SPA全屏切换效果却卡壳的滋味了！之前我尝试用display: none的时候也踩过一模一样的坑——这玩意儿会直接切断CSS过渡的执行链路，元素瞬间消失/出现，自然看不到想要的动画效果。结合你提到的transform: translateX和transition，我给你一套亲测有效的实现方案，分分钟搞定那种流畅的页面切换感：

核心思路先理清

首先要抛弃display: none的思路！我们用绝对定位+透明度+位移变换来控制页面的显示/隐藏，让CSS过渡能完整执行。每个页面元素始终存在于DOM中，只是通过样式控制它的视觉状态（在视口内/外、透明/不透明）。

具体实现步骤

1. HTML结构

把每个页面做成独立的容器，给它们统一的类名（比如.page），用.active类标记当前显示的页面：

<div class="page-container">
  <section class="page active" id="page1">
    <h1>页面1</h1>
    <button onclick="switchPage('page2')">切换到页面2</button>
  </section>
  <section class="page" id="page2">
    <h1>页面2</h1>
    <button onclick="switchPage('page1')">切换到页面1</button>
  </section>
</div>

2. CSS样式

关键是给所有页面设置基础全屏布局，默认状态下把页面移出视口并透明，.active状态让它回到视口内并显示，同时加上过渡属性：

.page-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* 防止页面滑动时露出其他页面 */
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 2rem;
  box-sizing: border-box;
  transition: all 0.5s ease; /* 过渡时长和曲线可自定义 */
  
  /* 默认状态：页面在视口右侧，完全透明 */
  transform: translateX(100%);
  opacity: 0;
}

.page.active {
  /* 激活状态：页面回到视口，完全不透明 */
  transform: translateX(0);
  opacity: 1;
}

/* 可选：给离开的页面添加向左滑出的效果 */
.page.active.out {
  transform: translateX(-100%);
  opacity: 0;
}

3. JavaScript逻辑

负责切换页面的active类，这里要注意顺序：先让当前页面滑出，再让新页面滑入，避免两个页面同时在视口内打架：

function switchPage(targetId) {
  const currentPage = document.querySelector('.page.active');
  const targetPage = document.getElementById(targetId);
  
  // 给当前页面添加.out类，触发滑出动画
  currentPage.classList.add('out');
  
  // 监听当前页面的过渡结束事件，再激活新页面
  currentPage.addEventListener('transitionend', function handler() {
    currentPage.classList.remove('active', 'out');
    targetPage.classList.add('active');
    currentPage.removeEventListener('transitionend', handler); // 移除监听避免重复触发
  });
}