菜單導航：能夠淡入但不確定如何在關閉時淡出（Tailwind CSS 和 Vanilla JS）

Question

我目前正在試驗 TailwindCSS 轉換和 Vanilla JS。 現在，我可以在單擊時淡入菜單導航頁面，但不確定再次單擊漢堡包按鈕時如何淡出。 非常感謝任何建議！

此外，除非視口低於 md，否則不會出現漢堡包按鈕，請將視口縮放至低於 md

網頁

<div
  id="menu"
  class="h-screen flex items-center bg-black fixed top-0 w-full opacity-0 invisible duration-300 ease-out transition-opacity md:hidden"
>
  <div id="menu-items" class="lg:ml-64 ml-32 space-y-10 z-10">
    <a
      href="#"
      class="menu-item text-white lg:text-9xl md:text-7xl text-6xl block"
      >About</a
    >
    <a
      href="#"
      class="menu-item text-white lg:text-9xl md:text-7xl text-6xl block"
      >Services</a
    >
    <a
      href="#"
      class="menu-item text-white lg:text-9xl md:text-7xl text-6xl block"
      >Project</a
    >
    <a
      href="#"
      class="menu-item text-white lg:text-9xl md:text-7xl text-6xl block"
      >Contact</a
    >
  </div>
</div>

JavaScript代碼

const showMenu = document.getElementById("menu");
const menuBtn = document.querySelector(".hamburger-button");
const body = document.getElementById("body");

menuBtn.addEventListener("click", function (e) {
    e.preventDefault();
    showMenu.classList.toggle("opacity-0");
    showMenu.classList.toggle("invisible");
    body.classList.toggle("overflow-hidden");
});

鏈接到已部署站點已部署站點

我嘗試在 tailwindCSS 上創建自定義關鍵幀/動畫以添加 fadeIn 和 fadeOut 動畫來實現淡入淡出交互性。

`

extend: {
      keyframes: {
        'fade-in': {
            '0%': {
                opacity: '0',
            },
            '100%': {
                opacity: '1',
            },
        },
        'fade-out': {
          '100%': {
              opacity: '1',
          },
          '0%': {
              opacity: '0',
          },
      }
      },
      animation: {
          'fade-in': 'fade-in 1s ease-out',
          'fade-out': 'fade-out 5s ease-out'
      },

`

然而，我的結果是只為動畫預建的 tailwindcss 類。

Answer 1

我能夠通過以下方式找到解決方案：

如果菜單導航頁面包含“opacity-0”或“opacity-100”類，則實施 if / else if 語句：

 menuBtn.addEventListener("click", function () { if (showMenu.classList.contains("opacity-0")) { showMenu.classList.remove("opacity-0") showMenu.classList.add("opacity-100") showMenu.classList.remove("invisible") body.classList.add('overflow-hidden') } else if(showMenu.classList.contains("opacity-100")) { showMenu.classList.remove("opacity-100") showMenu.classList.add("opacity-0") showMenu.classList.remove("visible") body.classList.remove('overflow-hidden') } });

無論如何，我的 html 代碼保持不變。 如果有另一種更有效、更干凈地編寫此代碼的方法，我們將不勝感激！