如何垂直放大和缩小菜单(带动画)

<ul id="menu">
  <li class="menu-item">菜单项1</li>
  <li class="menu-item">菜单项2</li>
  <li class="menu-item">菜单项3</li>
</ul>

.menu-item {
  /* 初始状态样式 */
  transform: scaleY(1);
  transition: transform 0.3s ease;
}

.menu-item:hover {
  /* 鼠标悬停时的放大效果 */
  transform: scaleY(1.2);
}

const menuItems = document.querySelectorAll('.menu-item');

menuItems.forEach(item => {
  item.addEventListener('mouseover', () => {
    item.classList.add('menu-item-hover');
  });

  item.addEventListener('mouseout', () => {
    item.classList.remove('menu-item-hover');
  });
});