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"

这样做的最佳方法是什么？

标签： css-transitionstailwind-csstailwind-ui