.mobile-menu {
  transform: translateX(-100%);
  transition: transform 0.3s ease-out;
}

.mobile-menu.active {
  transform: translateX(0);
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes slideOut {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.mobile-menu.active {
  animation: slideIn 0.3s forwards;
}

.mobile-menu:not(.active) {
  animation: slideOut 0.3s forwards;
}

const menuButton = document.querySelector('.menu-button');
const mobileMenu = document.querySelector('.mobile-menu');

menuButton.addEventListener('click', () => {
  mobileMenu.classList.toggle('active');
});

.mobile-menu {
  /* 初始状态 */
  transform: translateX(-100%);
  /* 防止初始渲染闪烁 */
  will-change: transform;
}

menuButton.addEventListener('click', (e) => {
  mobileMenu.classList.toggle('active');
  if (mobileMenu.classList.contains('active')) {
    e.stopPropagation();
  }
});

<div class="menu-container">
  <button class="menu-toggle">☰</button>
  <nav class="mobile-menu">
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
  <div class="menu-overlay"></div>
</div>

<style>
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background: #fff;
  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 999;
}

.mobile-menu.active {
  transform: translateX(0);
}

.mobile-menu.active + .menu-overlay {
  opacity: 1;
  visibility: visible;
}
</style>

<script>
document.querySelector('.menu-toggle').addEventListener('click', function() {
  document.querySelector('.mobile-menu').classList.toggle('active');
});

document.querySelector('.menu-overlay').addEventListener('click', function() {
  document.querySelector('.mobile-menu').classList.remove('active');
});
</script>