1

我将 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"

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

4

0 回答 0