如何使用CSS实现类似原生App的页面切场淡入淡出效果？-css教程-PHP中文网

单纯 opacity + transition 无法实现原生页面切场效果，因其缺乏位移、层级和方向感；必须结合 transform 位移、opacity 透明度及 z-index 层叠控制，并用 js 精确管理状态与动画时机。

如何使用css实现类似原生app的页面切场淡入淡出效果？

直接用 opacity + transition 做不了真正的“页面切场”效果——它只能淡入淡出单个元素，无法模拟原生 App 中页面整体滑入/滑出、带层级和方向感的过渡。要接近原生体验，必须结合 transform 位移 + opacity + 正确的层叠控制。

为什么单纯 opacity 过渡不适用于页面切场

原生 App 的页面切换（比如从首页滑到详情页）不是“变透明”，而是旧页向左滑出、新页从右滑入，两者常有重叠、遮挡、Z 轴层次变化。只改 opacity 会让两个页面堆在同一位置“叠着淡”，失去空间感和方向性，用户感知不到“前进/后退”语义。

常见错误现象：opacity: 0 后元素仍占文档流、能被点击、影响布局；用 display: none 又会中断过渡；JS 同步操作 class 切换可能触发样式未就绪就动画开始。

opacity 不提供位移，无法表达“页面在空间中移动”
transition 无法跨多个独立容器做协调动画（比如同时动两个 <section></section>）
缺少 z-index 和 transform-origin 控制，难以模拟 iOS 的卡片式滑动或 Android 的共享元素转场

用 transform + opacity 实现左右滑入滑出

核心是让两个页面容器（如 <main></main> 和 <article></article>）并排定位，通过 transform: translateX() 控制它们的进出位置，再用 opacity 配合强化视觉权重。

关键 CSS 示例：

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.35s;
}
.page--current {
  transform: translateX(0);
  opacity: 1;
  z-index: 2;
}
.page--prev {
  transform: translateX(-100%);
  opacity: 0.7;
  z-index: 1;
}
.page--next {
  transform: translateX(100%);
  opacity: 0.7;
  z-index: 1;
}

说明：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

所有页面用 position: absolute 脱离文档流，避免高度塌陷或滚动干扰
cubic-bezier(0.2, 0, 0.2, 1) 是 iOS 系统级缓动，比 ease-out 更跟手
opacity: 0.7 给非当前页轻微降权，增强主次感，但不设为 0，否则失去空间锚点
必须显式设置 z-index，否则层叠顺序由 DOM 顺序决定，容易错乱

JavaScript 触发时必须管理状态和时机

不能靠 :hover 或伪类，页面切换是明确的导航行为，需 JS 主动控制 class，并确保前一动画结束才启动下一帧。

实操要点：

用 element.classList.replace() 替代 add/remove，避免竞态（例如同时 add page--next 和 remove page--current）
监听 transitionend 事件，且限定只响应 transform 属性（event.propertyName === 'transform'），防止 opacity 结束也触发回调
切换前先给目标页设 visibility: visible，避免初始 opacity: 0 导致不可见但占位
返回时，若用浏览器原生 history.back()，需监听 popstate 并还原对应页面的 class 状态