transition 对 display: none 不生效是因为 display 是离散属性，浏览器无法插值计算 none 到 block 的中间状态，即使使用 transition: all 也表现为突变。
transition 为什么对 display: none 不生效
因为 display 是离散属性，浏览器无法插值计算 none 到 block 的中间状态。哪怕加了 transition: all 0.3s，切换时仍是突变。
解决思路是避开 display，改用可过渡的属性：
-
visibility+opacity：控制可见性与透明度，两者都支持过渡 -
height+overflow：适合折叠/展开类内容，需配合height: auto的特殊处理（见下一条） -
transform: translateX()：适合页面级左右滑动，性能更好，不触发重排
用 transform 实现页面滑入滑出（推荐用于 SPA 路由切换）
基于视口布局（position: fixed 或 position: absolute），用 transform 移动整个页面容器，避免影响文档流，且 GPU 加速更流畅。
示例结构：
<div class="page-container"> <div class="page current">首页</div> <div class="page next">详情页</div> </div>
CSS 关键部分：
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page.current { transform: translateX(0); }
.page.next { transform: translateX(100%); }
/* 切换后更新类名，比如 .page.current → .page.prev，.page.next → .page.current */
- 务必用
cubic-bezier调整缓动，原生ease在页面切换中显得拖沓 - 不要用
left替代transform：会触发重排，动画卡顿 - 切换前确保目标页已渲染且尺寸稳定，否则
transform可能错位
height: auto 无法过渡？用 max-height 模拟
当需要展开/收起一个高度不确定的模块（如响应式侧边栏、移动端菜单），直接写 transition: height 0.3s 对 height: auto 无效。
替代方案是用 max-height 配合足够大的固定值：
.menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.menu.open {
max-height: 500px; /* 设为远大于可能内容的高度 */
}
-
max-height必须设具体数值，不能用none或fit-content - 若内容高度超过设定值，会出现滚动或截断，需预估最大高度或 JS 动态设置
- 配合
overflow: hidden才能隐藏溢出，否则过渡过程会看到内容“撑开”
视口内多页面共存时的 z-index 与 pointer-events 控制
当多个 .page 同时存在于 DOM 中（如预加载下一页），必须明确层级和交互权限，否则点击会穿透或误触。
- 当前页设
z-index: 2; pointer-events: auto - 上一页/下一页设
z-index: 1; pointer-events: none（即使视觉上不可见，也要禁用事件） - 过渡结束瞬间再更新
pointer-events，避免动画中途误点 - 不要依赖
visibility: hidden来禁用交互——它仍响应事件
真正容易被忽略的是：过渡动画期间，DOM 仍处于活跃状态，JS 事件监听器不会自动暂停。如果切换逻辑里有节流或异步操作，得手动加锁或判断当前是否在动画中（比如检查 getComputedStyle(el).transform 是否变化未完成）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
