如何在切换时使汉堡菜单在响应式导航栏中平滑过渡？

<nav class="navbar">
  <div class="hamburger-menu"></div>
  <!-- 其他导航栏内容 -->
</nav>

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #333;
  transition: height 0.3s ease;
}

.hamburger-menu {
  width: 30px;
  height: 3px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

.navbar.open {
  height: 200px; /* 展开导航栏的高度 */
}

.navbar.open .hamburger-menu {
  transform: translate(-50%, -50%) rotate(45deg); /* 旋转汉堡菜单按钮 */
}

.navbar.open .hamburger-menu:before,
.navbar.open .hamburger-menu:after {
  top: 0;
  transform: translate(-50%, -50%) rotate(90deg); /* 旋转汉堡菜单按钮的两个横线 */
}

.navbar.open .hamburger-menu:before {
  top: -10px;
}

.navbar.open .hamburger-menu:after {
  top: 10px;
}

const hamburgerMenu = document.querySelector('.hamburger-menu');
const navbar = document.querySelector('.navbar');

hamburgerMenu.addEventListener('click', function() {
  navbar.classList.toggle('open');
});