如何为响应式菜单设置动画

.menu {
  /* 菜单样式 */
}

.menu-item {
  /* 菜单项样式 */
}

/* 设置菜单展开时的动画效果 */
.menu.open {
  max-height: 500px; /* 菜单最大高度 */
  transition: max-height 0.3s ease-in-out; /* 过渡效果 */
}

/* 设置菜单收起时的动画效果 */
.menu.closed {
  max-height: 0;
  transition: max-height 0.3s ease-in-out;
}

const menu = document.querySelector('.menu');
const toggleButton = document.querySelector('.toggle-button');

toggleButton.addEventListener('click', () => {
  menu.classList.toggle('open');
});