重寫後的標題為：How can I use Tailwind CSS to create animated dropdown menu with adjustable height?

Question

我正在使用：Tailwindcss、React 和 Next.js 進行業餘專案。

我正在嘗試建立一個響應式導覽欄，當螢幕尺寸達到順風定義的「sm」尺寸時，它會顯示一個漢堡選單。

當我點擊漢堡包圖示時，我希望菜單從高度 0 過渡到 max-h-40。

我覺得我在下面的程式碼中遺漏了一些微不足道的東西，希望其他人看到這個可以看到我遺漏了什麼？

navbar.tsx

#

"use client";

import Image from "next/image";
import Link from "next/link";
import {
  useState
} from "react";
import logo from "../public/finallang_favicon.ico";

export default function Navbar() {
  const [showMenu, setShowMenu] = useState(false);
  const toggleMenu = () => {
    setShowMenu(!showMenu);
  };
  return ( <
    div >
    <
    nav className = "flex items-center justify-between flex-grow w-auto py-3 text-center border-b px-9 sm:w-auto" >
    <
    div className = "flex items-center justify-center flex-shrink-0 sm:mr-6" >
    <
    Link href = "/" >
    <
    Image src = {
      logo
    }
    alt = "Logo"
    width = {
      48
    }
    height = {
      48
    }
    /> <
    /Link> <
    /div> <
    div className = "hidden text-sm sm:block" >
    <
    Link href = "#"
    className = "block mt-4 sm:mr-4 text-slate-900 hover:text-slate-700 sm:mt-0 sm:inline-block" >
    About <
    /Link> <
    Link href = "#"
    className = "block mt-4 sm:mr-4 text-slate-900 hover:text-slate-700 sm:mt-0 sm:inline-block" >
    Blog <
    /Link> <
    Link href = "#"
    className = "block mt-4 text-slate-900 hover:text-slate-700 sm:mt-0 sm:inline-block" >
    Contact Me <
    /Link> <
    /div> <
    div >
    <
    button className = "hidden px-4 py-2 text-sm leading-none rounded text-slate-100 hover:text-white sm:inline-block bg-brand" >
    Download <
    /button> <
    button onClick = {
      toggleMenu
    }
    aria - label = "Toggle navigation menu"
    className = "text-gray-400 align-middle sm:hidden hover:text-gray-900 focus:ring-2 rounded-md" >
    <
    svg xmlns = "http://www.w3.org/2000/svg"
    fill = "none"
    viewBox = "0 0 24 24"
    strokeWidth = {
      2
    }
    stroke = "currentColor"
    className = "w-6 h-6" >
    <
    path strokeLinecap = "round"
    strokeLinejoin = "round"
    d = "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" / >
    <
    /svg> <
    /button> <
    /div> <
    /nav> {
      showMenu &&
        <
        div className = {
          `${showMenu ? "max-h-40" : "h-0"} text-sm text-center sm:hidden transition-all duration-500 ease-in-out overflow-hidden`
        } >
        <
        Link href = "/about"
      className = "block mt-4 text-slate-900 hover:text-slate-700" >
        About <
        /Link> <
        Link href = "/blog"
      className = "block mt-4 text-slate-900 hover:text-slate-700" >
        Blog <
        /Link> <
        Link href = "/contact"
      className = "block mt-4 text-slate-900 hover:text-slate-700" >
        Contact Me <
        /Link> <
        /div>
    } <
    /div>
  );
}

我嘗試過的事情：

• 將 height: "height" 作為 transitionProperty 新增到我的 tailwind.config.js
• #將可能遺失的 overflow-hidden 類別名稱加入我的選單類別中
• 在下拉式選單的類別中在 transition-all 和 transition-[height] 之間切換

當前行為： 當前行為的動圖

我期望發生什麼：

• 下拉選單應在 500 毫秒的持續時間內從高度 0 過渡到最大高度 10rems (max-h-40)，並使用緩入過渡計時功能。

Answer 1

問題解釋

DOM掛載

透過程式碼片段進行條件渲染：

{showMenu &&
  

表示元素被掛載到 DOM 中或掛載到 DOM 之外。過渡不會在元素安裝/卸載的同一幀上播放。

CSS 屬性轉換

此外，您還可以使用選單容器的條件類別來變更不同的 CSS 屬性：

${showMenu ? "max-h-40" : "h-0"}

max-h-40 對應 max-height: 10rem 而 h-0 對應 height: 0。這意味著我們要更改兩個值的初始值：max-height 和 height。根據MDN， max-height 的初始值為none 和height 的初始值為auto< /a>.這些值相對於showMenu 的變化如下：

showMenu	#true	false
#max-height	#10rem	#none
#height	auto	0