如何使用纯JS平滑显示下拉菜单？

<button id="dropdown-btn">下拉菜单</button>
<ul id="dropdown-menu" style="display: none;">
  <li>菜单项1</li>
  <li>菜单项2</li>
  <li>菜单项3</li>
</ul>

#dropdown-menu {
  display: none;
  transition: all 0.3s ease;
}

#dropdown-menu.show {
  display: block;
}

var dropdownBtn = document.getElementById('dropdown-btn');
var dropdownMenu = document.getElementById('dropdown-menu');

dropdownBtn.addEventListener('click', function() {
  dropdownMenu.classList.toggle('show');
});