Tajuk yang ditulis semula ialah: Bagaimanakah saya boleh menggunakan CSS Tailwind untuk mencipta menu lungsur turun animasi dengan ketinggian boleh laras?

Question

Saya menggunakan: Tailwindcss, React dan Next.js untuk projek sampingan.

Saya cuba mencipta bar navigasi responsif yang memaparkan menu hamburger apabila saiz skrin mencapai saiz "sm" yang ditakrifkan oleh tailwind.

Apabila saya mengklik pada ikon hamburger, saya mahu menu beralih dari ketinggian 0 kepada maks-h-40.

Saya rasa seperti saya kehilangan sesuatu yang remeh dalam kod di bawah, harap orang lain yang melihat ini dapat melihat apa yang saya hilang?

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>
  );
}

Perkara yang saya telah cuba:

• Tambahkan height: "height" 作为 transitionProperty pada tailwind.config.js
saya
• Tambahkan overflow-hidden nama kelas yang mungkin hilang pada kelas menu saya
• Tukar antara transition-all 和 transition-[height] dalam kelas menu lungsur

Tingkah laku semasa: GIF tingkah laku semasa

Apa yang saya jangka akan berlaku:

• Turun turun hendaklah beralih daripada ketinggian 0 kepada ketinggian maksimum 10rem (maks-j-40) dalam tempoh 500 milisaat, menggunakan fungsi pemasaan peralihan mudah masuk.

Answer 1

Penjelasan masalah

Pemasangan DOM

Penyampaian bersyarat melalui coretan kod:

{showMenu &&
  

Menunjukkan bahawa elemen dipasang ke dalam DOM atau dipasang di luar DOM. Peralihan tidak dimainkan pada bingkai yang sama seperti elemen dipasang/dilepaskan.

Transformasi Harta CSS

Selain itu, anda boleh menukar sifat CSS yang berbeza menggunakan kelas bersyarat bekas menu:

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

Perubahan

max-h-40 对应 max-height: 10rem 而 h-0 对应 height: 0。这意味着我们要更改两个值的初始值：max-height 和 height。根据 MDN， max-height 的初始值为none 和 height 的初始值为 auto< /a>.这些值相对于 showMenu adalah seperti berikut:

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