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

Question

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

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

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

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

navbar.tsx

으아아아

내가 시도한 것:

• tailwind.config.js에 height: "height" 作为 transitionProperty를 추가하세요
• 내 메뉴 클래스에 누락되었을 수 있는 overflow-hidden 클래스 이름을 추가하세요
• 드롭다운 메뉴의 클래스에서 transition-all 和 transition-[height]를 전환하세요

현재 행동: 현재 행동의 GIF

내가 예상했던 일:

• 드롭다운은 Ease-In 전환 타이밍 기능을 사용하여 500밀리초 내에 높이 0에서 최대 높이 10rems(max-h-40)로 전환되어야 합니다.

Answer 1

문제 설명

DOM 마운팅

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

으아아아

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

CSS 속성 변환

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

으아아아

max-h-40 对应 max-height: 10rem 而 h-0 对应 height: 0。这意味着我们要更改两个值的初始值：max-height 和 height。根据 MDN， max-height 的初始值为none 和 height 的初始值为 auto.这些值相对于 showMenu의 변경 사항은 다음과 같습니다.

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