如何实现平滑的菜单展开与收起过渡动画-js教程-PHP中文网

如何实现平滑的菜单展开与收起过渡动画

通过 CSS transform: translateX() 替代 position 切换，配合 transition 实现菜单宽度变化与关闭按钮位移的同步动画，避免布局重排导致的“跳动”问题。

通过 css `transform: translatex()` 替代 `position` 切换，配合 `transition` 实现菜单宽度变化与关闭按钮位移的同步动画，避免布局重排导致的“跳动”问题。

在实现响应式侧边菜单（如遮罩式导航栏）时，常见的痛点是：菜单展开流畅，但收起时内容项突然下移、关闭按钮（×）生硬回弹——这并非动画失效，而是由 position: relative/absolute 的切换触发了浏览器强制重排（reflow），破坏了 CSS 过渡的连续性。

核心解决思路是：保持元素定位方式稳定，仅通过 transform 控制视觉位移。transform 属于合成属性（composited property），浏览器可在独立图层中高效处理其动画，不触发重排，从而保证丝滑过渡。

以下是优化后的完整实现方案：

纯css无限循环渐变曲线动画效果

纯css无限循环渐变曲线动画效果，该特效很适合网页制作，无限循环的动画效果。

下载

✅ 关键修改点

将关闭按钮 .menubutton 的 position 固定为 absolute（不再在 JS 中动态切换）；
使用 transform: translateX() 控制按钮在菜单展开/收起时的水平位移；
通过 CSS 类（如 .hide）管理状态，提升可维护性；
所有尺寸均采用相对单位（%、em 等），天然适配不同屏幕。

? 示例代码

JavaScript（逻辑更清晰、语义化）

let menuOpen = false;

function toggleNav() {
  const overlay = document.getElementById("nav");
  const closeBtn = document.getElementById("menubtn");

  if (menuOpen) {
    overlay.style.width = "0%";
    closeBtn.classList.add("hide"); // 向左滑出视区
  } else {
    overlay.style.width = "50%";
    closeBtn.classList.remove("hide"); // 滑入视区右侧
  }
  menuOpen = !menuOpen;
}

CSS（关键动画声明）

.overlay {
  height: 100%;
  width: 0%;
  z-index: 1;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.9);
  position: fixed;
  transition: width 0.3s cubic-bezier(0.34, 1.61, 0.7, 1); /* 更自然的缓动 */
}

.overlay .menubutton {
  top: -20px;
  right: 0;
  font-size: 36px;
  z-index: 2;
  position: absolute;
  overflow: visible;
  /* 初始状态：按钮位于菜单右侧外（隐藏） */
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}

.overlay .menubutton.hide {
  /* 收起时：向左平移自身宽度，完全隐藏 */
  transform: translateX(0);
}

/* 可选：增强用户体验的细节 */
.overlay-content a {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.overlay:not(.hide) .overlay-content a {
  opacity: 1;
  transform: translateY(0);
}

⚠️ 注意事项

避免 display: none：它会移除元素渲染流，导致 transition 失效；改用 opacity + visibility 或 transform 隐藏更安全；
慎用 width: 0%：若内容存在 padding/border，可能残留微小宽度。更健壮的做法是配合 overflow: hidden 并使用 max-width 或 clip-path；
性能提示：为 .overlay 添加 will-change: width（仅在必要时）可进一步提示浏览器优化渲染；
无障碍支持：记得在 toggleNav() 中同步切换 aria-expanded 属性，并管理焦点流（如菜单打开后将焦点移到首个链接）。