单纯用 opacity + transition 切页会“闪一下”，因缺位移、层级和方向感；transition 必须写在实际变化的 .page 元素上，且仅对 opacity、transform 等可过渡属性生效，配合 transform: translatex()、z-index 和精确 timing 才能实现原生级滑动效果。
单纯用 opacity + transition 做切页，视觉上就是“闪一下”，不是真过渡——它缺位移、缺层级、缺方向感，用户根本分不清是前进还是后退。
为什么 transition 写在 .page 上却没动画？
动画只对「自身属性变化」生效，不是谁点谁动。比如你用 JS 给 .page 加 is-exiting 类来触发淡出，transition 就必须提前写在 .page 的基础样式里，而不是写在按钮或父容器上。
- 常见错误：把
transition: opacity 0.3s写在触发按钮上，结果.page一点反应没有 -
transition必须作用于实际发生变化的元素，且变化的属性得是可过渡的（opacity、transform可以，display、height（未设具体值时）不行） - 如果用 JS 动态加 class，确保 class 中改的是已声明可过渡的属性，比如
opacity或transform，别写成left: 100%
移动端 touch 后 transition 突然失效？
不是 CSS 错了，是浏览器没及时重绘——尤其是快速连续切换时，opacity 值变了，但过渡队列被跳过，页面直接消失。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 典型现象：第一次点击有效，第二次起瞬间切换；或 touch 后无动画、只有最终态
- 最轻量解法：在 JS 设置退出类前，强制读一次
offsetHeight，触发同步 layout - 别用
setTimeout(, 0)，它不可靠，还引入延迟 - 如果用
visibility: hidden配合opacity，记得同时写transition: opacity 0.3s, visibility 0.3s，否则visibility会立刻生效，打断过渡
如何让左右滑入滑出真正像原生 App？
关键不在“淡”，而在“移”+“叠”+“控时序”：两个页面并排定位，靠 transform: translateX() 控制进出位置，z-index 管层级，opacity 辅助视觉权重。
-
.page必须是position: absolute，避免影响文档流；top: 0; left: 0; width: 100%; height: 100%是基础 - 当前页：
transform: translateX(0); opacity: 1; z-index: 2 - 上一页（后退）：
transform: translateX(-100%); opacity: 0.7; z-index: 1 - 下一页（前进）：
transform: translateX(100%); opacity: 0.7; z-index: 1 - 过渡函数别用默认
ease，iOS 风格推荐cubic-bezier(0.2, 0, 0.2, 1)，Android 推荐cubic-bezier(0.25, 0.46, 0.45, 0.94)
最容易被忽略的是：动画开始前，目标页必须已渲染且尺寸稳定。如果新页内容异步加载、高度未定，transform 会错位或抖动；height: auto 无法过渡，要用 max-height 模拟，且值要足够大。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
