通过 CSS transition 属性配合 JavaScript 动态修改 left 值，可让 div 元素在点击按钮时平滑滑入/滑出视口，关键在于避免直接设置 display: none，而应全程依赖 CSS 过渡控制可见性。
通过 css `transition` 属性配合 javascript 动态修改 `left` 值，可让 div 元素在点击按钮时平滑滑入/滑出视口，关键在于避免直接设置 `display: none`，而应全程依赖 css 过渡控制可见性。
要实现一个 div 盒子（如导航面板）在点击按钮时平滑滑入并平滑滑出，核心原则是：动画必须由 CSS transition 驱动，JavaScript 仅负责触发状态切换，绝不中途强制隐藏元素（如 display: none）。一旦设置 display: none，元素立即脱离文档流，CSS 过渡将被中断，导致“闪退”现象——这正是原代码中滑出失效的根本原因。
✅ 正确实现方式
1. CSS 中定义过渡效果（关键！）
#list-of-nav {
position: absolute;
left: -300px; /* 初始状态：完全左移隐藏 */
width: 300px;
background-color: #ffffff;
z-index: 1000;
transition: left 0.3s ease-out; /* 滑入/滑出均由此生效 */
}
⚠️ 注意：transition 必须写在基础状态（即非 hover 或动态 class）上，且需明确指定过渡属性（如 left）和时间函数（如 ease-out），否则无法反向生效。
2. JavaScript 仅控制 left 值，不操作 display
let isNavOpen = false;
function showNav() {
const nav = document.getElementById("list-of-nav");
if (isNavOpen) {
nav.style.left = "-300px"; // 滑出：回到隐藏位置
} else {
nav.style.left = "0"; // 滑入：归位到可视区域左边界
}
isNavOpen = !isNavOpen;
}
- ✅ 移除所有 display: inline/none 操作——left: -300px 已足够视觉隐藏，且保留 DOM 占位，确保 transition 可逆；
- ✅ 使用布尔状态变量替代 navShowCount % 2，语义更清晰、不易出错；
- ✅ 不再依赖 offsetLeft 动态计算（易受布局干扰），直接使用确定值（如 0 和 -300px）保证行为稳定。
3. HTML 结构保持简洁
<button class="nav-button" onclick="showNav()">☰</button> <div id="list-of-nav"> <p>Navigation</p> </div>
? 为什么原方案失败？
- 原代码在“滑出”分支中先设 left: 0px，再设 left: -150px，最后 display: none —— 第二次 left 赋值未触发重排，且 display: none 立即终止所有 CSS 动画；
- offsetLeft 在元素未渲染或 display: none 时返回 0，导致计算失真；
- 缺少 transition 声明，或未应用于基础样式，致使浏览器无过渡依据。
? 进阶建议
- 若需更高灵活性，推荐使用 CSS 类切换（如 .nav-open { left: 0; }），配合 element.classList.toggle()，更易维护且支持多属性过渡（如 transform, opacity）；
- 对于移动端，可添加 will-change: left 提升动画性能（谨慎使用）；
- 配合 transform: translateX() 替代 left 更高效（GPU 加速），例如：
#list-of-nav { transform: translateX(-300px); transition: transform 0.3s ease-out; } /* JS 中改为：nav.style.transform = "translateX(0)" / "translateX(-300px)" */
只要坚持「CSS 控制动画，JS 控制状态」这一分工原则，滑入滑出即可真正平滑、可靠、可预测。
