通过 CSS transition 配合 JavaScript 动态修改 left 值，可让 div 实现双向平滑滑动效果；关键在于避免直接设置 display: none，而应统一用 transition 控制位移，并确保初始状态与动画逻辑一致。
通过 css `transition` 配合 javascript 动态修改 `left` 值，可让 div 实现双向平滑滑动效果；关键在于避免直接设置 `display: none`，而应统一用 `transition` 控制位移，并确保初始状态与动画逻辑一致。
要实现一个 div 元素在点击按钮时平滑滑入、再平滑滑出，核心思路是：将动画逻辑完全交由 CSS transition 处理，JavaScript 仅负责切换状态（如修改 left 值），而非手动控制逐帧位移或强制隐藏元素。
原代码的问题在于：
- 滑出时直接设置 nav.style.display = "none"，导致元素瞬间消失，中断了 CSS 过渡；
- 滑出逻辑中 nav.style.left = "0px" 后又立即赋值为负偏移，但未预留回退动画时间，且 display: none 会立即移除渲染，使 transition 失效。
✅ 正确做法是：
- CSS 中统一定义过渡效果：对 left 属性设置 transition: left 0.3s ease-out，并确保元素始终处于文档流中（即不使用 display: none）；
- 初始状态设为 left: -300px（完全隐藏在视口左侧）；
- JS 仅切换 left 值：滑入时设为 left: 0，滑出时重置为 left: -300px，由 CSS 自动完成缓动动画。
以下是优化后的完整实现：
/* style.css */
#list-of-nav {
position: absolute;
left: -300px; /* 初始隐藏 */
top: 50px;
width: 300px;
background-color: whitesmoke;
color: #2c2c2c;
padding: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
z-index: 1000;
transition: left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 更自然的缓动曲线 */
}
/* 可选：添加淡入效果（增强体验） */
#list-of-nav {
opacity: 0;
}
#list-of-nav.show {
left: 0;
opacity: 1;
}
// index.js
let isNavOpen = false;
function showNav() {
const nav = document.getElementById("list-of-nav");
if (isNavOpen) {
nav.classList.remove("show");
} else {
nav.classList.add("show");
}
isNavOpen = !isNavOpen;
}
<!-- HTML 中保持结构简洁 -->
<button class="nav-button" type="button" onclick="showNav()">☰</button>
<div id="list-of-nav">
<p>Navigation</p>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
? 关键注意事项：
- ❌ 不要使用 display: none/block 控制显隐——它会破坏 transition；
- ✅ 推荐用 opacity + pointer-events: none（配合 transition）实现更细腻的进出效果；
- ✅ 使用 classList.toggle() 可进一步简化逻辑（如 nav.classList.toggle('show')）；
- ⚠️ 若需兼容旧浏览器，可补充 -webkit-transition；现代项目推荐搭配 requestAnimationFrame 或 CSS-in-JS 方案做更复杂动效。
最终效果：点击按钮，导航栏从左侧匀速滑入；再次点击，平滑滑回隐藏位置——全程无闪烁、无突兀跳变，符合用户对“流畅交互”的预期。
