>  Q&A  >  본문

다시 작성된 제목은 다음과 같습니다. Tailwind CSS를 사용하여 높이 조절이 가능한 애니메이션 드롭다운 메뉴를 만들려면 어떻게 해야 합니까?

저는 사이드 프로젝트에 Tailwindcss, React 및 Next.js를 사용하고 있습니다.

화면 크기가 tailwind에서 정의한 "sm" 크기에 도달하면 햄버거 메뉴를 표시하는 반응형 탐색 모음을 만들려고 합니다.

햄버거 아이콘을 클릭하면 메뉴가 높이 0에서 max-h-40으로 전환되기를 원합니다.

아래 코드에서 뭔가 사소한 것이 빠진 것 같습니다. 이 코드를 보는 다른 사람들도 제가 놓친 부분을 알 수 있기를 바랍니다.

navbar.tsx

으아아아

내가 시도한 것:

현재 행동: 현재 행동의 GIF

내가 예상했던 일:

P粉667649253P粉667649253268일 전482

모든 응답(1)나는 대답할 것이다

  • P粉216807924

    P粉2168079242024-02-18 10:08:48

    문제 설명

    DOM 마운팅

    코드 조각을 통한 조건부 렌더링:

    으아아아

    요소가 DOM에 마운트되었거나 DOM 외부에 마운트되었음을 ​​나타냅니다. 전환은 요소가 마운트/마운트 해제되는 것과 동일한 프레임에서 재생되지 않습니다.

    CSS 속성 변환

    또한 메뉴 컨테이너의 조건부 클래스를 사용하여 다양한 CSS 속성을 변경할 수 있습니다.

    으아아아

    max-h-40 对应 max-height: 10remh-0 对应 height: 0。这意味着我们要更改两个值的初始值:max-heightheight。根据 MDN, max-height 的初始值为noneheight 的初始值为 auto< /a>.这些值相对于 showMenu의 변경 사항은 다음과 같습니다.

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

    회신하다
    0
  • 취소회신하다