如何优化网站Overlay菜单展开与收起的过渡动画效果？

核心思路 #

避免切换元素的position属性（该属性无法实现平滑过渡），通过固定定位+百分比单位控制按钮位置，同时调整容器布局逻辑消除文本跳动问题。

修复后完整代码 #

HTML

<div id="nav" class="overlay">
  <a id="menubtn" class="menubutton" onclick="toggleNav()">&times;</a>
  <div class="overlay-content">
    <a href="#">Option</a>
    <a href="#">Option</a>
    <a href="#">Option</a>
    <a href="#">Option</a>
  </div>
</div>

CSS

.overlay {
  height: 100%;
  width: 0%;
  z-index: 1;
  left: 0;
  top: 0;
  transition: width 0.2s ease;
  background-color: rgba(0, 0, 0, 0.9);
  position: fixed;
  overflow: visible; /* 保证菜单关闭时按钮依然可见 */
}

.overlay.open {
  width: 50%;
}

.overlay a {
  transition: color 0.2s ease;
  padding-block: 8px;
  color: #929292;
  text-decoration: none;
  display: block;
}

.overlay a:hover {
  color: #F2F2F2;
}

.overlay-content {
  font-size: 16px;
  width: 100%;
  top: 25%;
  position: relative;
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s ease 0.1s; /* 延迟文本显示，避免宽度变化时的跳动 */
}

.overlay.open .overlay-content {
  opacity: 1;
}

.overlay .menubutton {
  top: 2%; /* 百分比单位适配不同屏幕高度 */
  right: 2%; /* 百分比单位适配不同屏幕宽度 */
  font-size: 36px;
  z-index: 2;
  position: absolute;
  transition: transform 0.2s ease;
}

.overlay.open .menubutton {
  transform: translateX(-100%); /* 菜单展开时按钮随容器平滑左移 */
}

JavaScript

var menuOpen = false;

function toggleNav() {
  const nav = document.getElementById("nav");
  if (menuOpen) {
    nav.classList.remove("open");
  } else {
    nav.classList.add("open");
  }
  menuOpen = !menuOpen;
}

关键修复说明 #

1. 解决文本跳动问题

   • 给.overlay-content添加透明度过渡，菜单关闭时隐藏文本，展开时延迟显示，避免宽度变化过程中文本位置突变。
   • 移除原代码中.overlay a的overflow: hidden，防止文本被意外裁剪导致的布局异常。

2. 修复按钮跳动问题

   • 固定.menubutton为absolute定位，不再切换position属性，消除因非过渡属性变更导致的跳变。
   • 使用transform: translateX(-100%)实现按钮的平滑移动，配合容器宽度过渡同步动画。
   • 用百分比设置按钮的top和right值，确保在不同尺寸屏幕上都能保持合理位置。

3. 代码可维护性优化

   • 通过CSS类切换控制菜单状态，替代直接修改元素行内样式，逻辑更清晰。
   • 明确指定过渡属性（如width、transform），避免不必要的过渡触发。

内容的提问来源于stack exchange，提问作者TheDudeofDC