通过 CSS transition 配合 JavaScript 动态修改 left 值，可让 div 实现双向平滑滑动效果；关键在于避免直接设置 display: none（会中断过渡），而应统一用 left 控制位移，并在动画结束后再隐藏元素（如需）。
通过 css `transition` 配合 javascript 动态修改 `left` 值，可让 div 实现双向平滑滑动效果；关键在于避免直接设置 `display: none`（会中断过渡），而应统一用 `left` 控制位移，并在动画结束后再隐藏元素（如需）。
要让一个
元素真正实现「滑入 + 滑出」的双向平滑动画，核心原则是：动画必须由 CSS 过渡（transition）驱动，JavaScript 仅负责触发动画状态切换，而非手动逐帧控制位置或强制隐藏元素。
原代码的问题在于：滑出时直接设置了 nav.style.display = "none"，这会导致元素立即从文档流中移除，CSS 过渡被强制中断，从而失去动画效果。此外，滑出逻辑中对 left 的计算不一致（如 navLeftPos - 150），且未复位到初始偏移值，进一步破坏了可逆性。
✅ 正确做法如下：
CSS 中定义过渡属性
在 #list-of-nav 上声明 transition: left 0.3s 0.1s ease-out;，确保 left 变化时自动触发平滑过渡。初始状态设为 left: -300px（完全隐藏），展开时设为 left: 0（完全显示）。JavaScript 仅切换目标状态
不操作 display，只修改 left 值。滑入 → left: 0；滑出 → left: -300px。浏览器会自动补全中间帧。
#list-of-nav {
position: absolute;
left: -300px; /* 初始隐藏位置 */
width: 300px;
background-color: whitesmoke;
z-index: 1000;
transition: left 0.3s ease-out; /* 关键：left 变化即触发过渡 */
}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;
}? 进阶建议（提升体验）：
- 若需在滑出完成后彻底隐藏元素（例如节省重绘资源），可监听 transitionend 事件：
nav.addEventListener('transitionend', () => { if (nav.style.left === '-300px') { nav.style.display = 'none'; // 动画结束再隐藏 } else { nav.style.display = 'block'; } }); - 使用 CSS 类名控制状态更利于维护（推荐）：
#list-of-nav.closed { left: -300px; } #list-of-nav.open { left: 0; }nav.classList.toggle('open'); nav.classList.toggle('closed');
总结：平滑滑动的本质是「声明式动画」——用 CSS 定义“如何动”，用 JS 定义“动到哪”。摒弃 display: none/block 的硬切换，拥抱 transition + 状态驱动，即可轻松实现专业级交互动效。
