Question

我正在使用来自 Tailwind UI 的登录页面模板，我需要添加一些 JS 以在移动设备上启用汉堡菜单功能。这是我通过单击按钮添加/删除的代码：

|      <div class="absolute top-0 inset-x-0 p-2 transition transform origin-top md:hidden invisible" id="burger-menu-main">
|        <div class="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
|          <div class="px-5 pt-4 flex items-center justify-between">
|            <div>
|              <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-teal-500-cyan-600.svg" alt="">
|            </div>
|            <div class="-mr-2">
|              <button type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyan-600">
|                <span class="sr-only">Close menu</span>
|                <!-- Heroicon name: x -->
|                <a href="javascript:void(0);" onclick="menuFunctionClose()">
|                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" id="x-button">
|                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|                </svg>
|                </a>
|              </button>
|            </div>
|          </div>

这是我用来控制菜单可行性的内嵌 javascript（我使用的是 Pug，所以这就是语法可能看起来有点奇怪的原因）：

script.
  function menuFunctionClose() {
    const x = document.getElementById('burger-menu-main')
    x.classList.add("invisible");
  }

script.
  function menuFunction() {
    const x = document.getElementById('burger-menu-main')
    if (x.classList.contains("invisible")) {
    x.classList.remove("invisible")
    } else {
    x.classList.add("invisible") 
    }
  }

我几乎只是通过单击按钮在 Tailwind 中添加和删除“隐形”类。这似乎不适用于任何过渡属性。我想知道在添加/删除类时是否/如何创建平滑的过渡效果。

我尝试将 duration-150 ease-out 添加到下面的代码行，但这对我不起作用。

 <div class="absolute top-0 inset-x-0 p-2 transition duration-150 ease-out transform origin-top md:hidden invisible" id="burger-menu-main">

当我使用 Javascript 删除和添加类名时，如何使用 Tailwind 添加过渡？

0 个答案: