如何完善菜单打开和关闭之间的过渡？

Question

我正在为我的网站制作一个菜单叠加层。由于我相对缺乏经验，我的我的程序基于我在W3Schools上找到的这个。

var menuOpen = false;

function toggleNav() {
  if (menuOpen == true) {
    document.getElementById("nav").style.width = "0%";
    document.getElementById("menubtn").style.position = "relative";
  } else {
    document.getElementById("nav").style.width = "50%";
    document.getElementById("menubtn").style.position = "absolute";
  }
  menuOpen = !menuOpen;
}

.overlay {
  height: 100%;
  width: 0%;
  z-index: 1;
  left: 0;
  top: 0;
  transition: 0.2s;
  background-color: rgba(0, 0, 0, 0.9);
  position: fixed;
}

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

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

.overlay-content {
  font-size: 16px;
  width: 100%;
  top: 25%;
  z-index: 1;
  position: relative;
  text-align: center;
}

.overlay .menubutton {
  top: -20px;
  right: 0px;
  font-size: 36px;
  z-index: 2;
  position: relative;
  overflow: visible;
}

<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>

我的问题在于菜单打开和关闭之间的过渡。首先，构成菜单中选项的文本在关闭时会向下对齐，尽管在打开期间表现正常。其次，打开和关闭菜单的 X 按钮在打开过程中也可以正常工作，但在关闭过程中它会弹回到原来的位置。

这一次，我实际上意识到了导致第一个错误的原因，它在于转换之间 X 按钮的位置值的变化。如果我阻止按钮在单击时将其位置更改为绝对位置，那么问题似乎就得到了解决，但这也阻止了 X 在打开时跟随菜单的其余部分。

第二个错误让我有点困惑。每当菜单关闭时，为了防止按钮像菜单内容一样隐藏在屏幕外，按钮的位置会切换到相对位置。虽然这可以防止它离开屏幕，但会导致它突然弹回原位，而不是平滑地滑过。

修复的目标最好是使用百分比来适应不同的屏幕和窗口尺寸。感谢您的帮助。

Answer 1

打开和关闭菜单的按钮在关闭时变得稳定。这就是按钮被按下的原因。

相反，只需保持按钮位置绝对并且仅更改变换translateX值。

示例：

var menuOpen = false;

function toggleNav() {
  if (menuOpen == true) {
    document.getElementById("nav").style.width = "0%";
    document.getElementById("menubtn").classList.remove("hide");
  } else {
    document.getElementById("nav").style.width = "50%";
    document.getElementById("menubtn").classList.add("hide");
  }
  menuOpen = !menuOpen;
}

.overlay {
  height: 100%;
  width: 0%;
  z-index: 1;
  left: 0;
  top: 0;
  transition: 0.2s;
  background-color: rgba(0, 0, 0, 0.9);
  position: fixed;
}

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

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

.overlay-content {
  font-size: 16px;
  width: 100%;
  top: 25%;
  z-index: 1;
  position: relative;
  text-align: center;

}

.overlay .menubutton {
  top: -20px;
  right: 0px;
  font-size: 36px;
  z-index: 2;
  position: absolute;
  overflow: visible;
  transform: translateX(100%);
}

.overlay .menubutton.hide {
  transform: translateX(0%);
}