css-transitions - 非表示のプロパティを切り替えるときに、Tailwind で CSS トランジション効果を実装するにはどうすればよいですか?

Question

ランディング ページに TailwindUI を使用しており、折りたたまれていないときは次のようなドロップ ダウン メニューが含まれています。

現在、非表示のプロパティを切り替える非常に単純なインライン JavaScript を使用して、[ソリューション] リンクをクリックするとメニューが表示されるようにしています。コードは次のようになります。

script.
  function closeMenu() {
    document.getElementById('buttonMenu').classList.toggle("invisible");
  }

メニューの切り替えが急激にならないように遷移効果を実装する方法を知りたいです。TailwindUI では、次の設定が推奨されています。

          //
            'Solutions' flyout menu, show/hide based on flyout menu state.
            Entering: "transition ease-out duration-200"
            From: "opacity-0 translate-y-1"
            To: "opacity-100 translate-y-0"
            Leaving: "transition ease-in duration-150"
            From: "opacity-100 translate-y-0"
            To: "opacity-0 translate-y-1"

これを行う最善の方法は何ですか？