Le titre réécrit est : Comment puis-je utiliser Tailwind CSS pour créer un menu déroulant animé avec une hauteur réglable ?

Question

J'utilise : Tailwindcss, React et Next.js pour les projets parallèles.

J'essaie de créer une barre de navigation réactive qui affiche un menu hamburger lorsque la taille de l'écran atteint la taille "sm" définie par le vent arrière.

Lorsque je clique sur l'icône du hamburger, je souhaite que le menu passe de la hauteur 0 à max-h-40.

J'ai l'impression qu'il me manque quelque chose de trivial dans le code ci-dessous, j'espère que d'autres qui regardent ceci pourront voir ce qui me manque ?

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

Choses que j'ai essayées :

• Ajouter height: "height" 作为 transitionProperty à mon tailwind.config.js
• Ajouter le nom de la classe overflow-hidden éventuellement manquant à mon menu de classe
• Basculez entre transition-all 和 transition-[height] dans la classe du menu déroulant

Comportement actuel : GIF du comportement actuel

Ce à quoi je m'attendais :

• La liste déroulante doit passer de la hauteur 0 à une hauteur maximale de 10rems (max-h-40) sur une durée de 500 millisecondes, en utilisant la fonction de synchronisation de transition facile.

Answer 1

Explication du problème

Montage DOM

Rendu conditionnel via un extrait de code :

{showMenu &&
  

Indique que l'élément est monté dans le DOM ou monté à l'extérieur du DOM. La transition ne joue pas sur le même cadre puisque l'élément est monté/démonté.

Transformation de la propriété CSS

Vous pouvez également modifier différentes propriétés CSS à l'aide de la classe conditionnelle du conteneur de menu :

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

Les changements de

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

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