저는 사이드 프로젝트에 Tailwindcss, React 및 Next.js를 사용하고 있습니다.
화면 크기가 tailwind에서 정의한 "sm" 크기에 도달하면 햄버거 메뉴를 표시하는 반응형 탐색 모음을 만들려고 합니다.
햄버거 아이콘을 클릭하면 메뉴가 높이 0에서 max-h-40으로 전환되기를 원합니다.
아래 코드에서 뭔가 사소한 것이 빠진 것 같습니다. 이 코드를 보는 다른 사람들도 제가 놓친 부분을 알 수 있기를 바랍니다.
navbar.tsx
으아아아
내가 시도한 것:
height: "height"
作为 transitionProperty
를 추가하세요overflow-hidden
클래스 이름을 추가하세요transition-all
和 transition-[height]
를 전환하세요현재 행동: 현재 행동의 GIF
내가 예상했던 일:
P粉2168079242024-02-18 10:08:48
코드 조각을 통한 조건부 렌더링:
으아아아요소가 DOM에 마운트되었거나 DOM 외부에 마운트되었음을 나타냅니다. 전환은 요소가 마운트/마운트 해제되는 것과 동일한 프레임에서 재생되지 않습니다.
또한 메뉴 컨테이너의 조건부 클래스를 사용하여 다양한 CSS 속성을 변경할 수 있습니다.
으아아아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 |