如何在javascript中为推式菜单添加过渡效果？

<button id="toggleBtn">Toggle Menu</button>
<ul id="menu">
  <li>菜单项1</li>
  <li>菜单项2</li>
  <li>菜单项3</li>
</ul>

#menu {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

#menu.open {
  height: 100px; /* 菜单的展开高度 */
}

const toggleBtn = document.getElementById('toggleBtn');
const menu = document.getElementById('menu');

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