滑动菜单，如何同时滑入和滑出？

<div class="menu-container">
  <button class="menu-toggle">菜单</button>
  <div class="menu-content">
    <!-- 菜单内容 -->
  </div>
</div>

.menu-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.menu-toggle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.menu-content {
  position: absolute;
  top: 0;
  left: -100%; /* 初始位置在屏幕左侧 */
  width: 80%; /* 菜单宽度 */
  height: 100%;
  background-color: #f1f1f1;
  transition: left 0.3s ease; /* 动画效果 */
}

const menuToggle = document.querySelector('.menu-toggle');
const menuContent = document.querySelector('.menu-content');

menuToggle.addEventListener('click', () => {
  if (menuContent.style.left === '-100%') {
    menuContent.style.left = '0'; /* 滑入菜单 */
  } else {
    menuContent.style.left = '-100%'; /* 滑出菜单 */
  }
});