使用Tailwind CSS实现下拉菜单动画失效问题求助

我尝试使用Tailwind CSS为下拉菜单实现动画效果，设置了相关类名，期望点击汉堡按钮时触发过渡动画，但动画未按预期生效。以下是我使用的HTML和JavaScript代码片段：

HTML代码 #

<nav id="dropdown" class="hidden py-5 px-4 bg-grayshade-10 border-b-[1px] border-grayshade-15 flex gap-5 flex-col items-center text-white text-barlow transition ease-out duration-200">
    <a class="hover:text-greenshade-60 active:text-greenshade-80" href="=">Home</a>
    <a class="hover:text-greenshade-60 active:text-greenshade-80" href="=">Service</a>
    <a class="hover:text-greenshade-60 active:text-greenshade-80" href="=">Work</a>
    <a class="hover:text-greenshade-60 active:text-greenshade-80" href="=">Process</a>
    <a class="hover:text-greenshade-60 active:text-greenshade-80" href="=">About</a>
</nav>

JavaScript代码 #

const burger = document.querySelector("#burgermenu");
const burgerLine = document.querySelector("#linecontainer");

const dropMenu = document.querySelector("#dropdown");

burger.addEventListener("click", () => {
  burgerLine.classList.toggle("burgerActive");
  dropMenu.classList.toggle("hidden");
});

我希望下拉菜单显示或隐藏时能有动画效果，但目前完全没有动画。请问我的实现方式或使用的Tailwind CSS类名存在问题吗？感谢您的帮助和见解！

问题展示：

内容的提问来源于stack exchange，提问作者lostboii999