書き直されたタイトルは、「Tailwind CSS を使用して高さを調整できるアニメーション ドロップダウン メニューを作成するにはどうすればよいですか?」です。

Question

私はサイド プロジェクトに Tailwindcss、React、Next.js を使用しています。

画面サイズが tailwind で定義された「sm」サイズに達したときにハンバーガー メニューを表示する、応答性の高いナビゲーション バーを作成しようとしています。

ハンバーガー アイコンをクリックすると、メニューが高さ 0 から最大高さ 40 に遷移するようにします。

以下のコードに些細な何かが欠けているような気がします。これを見ている他の人が私が欠けているものを理解できることを願っています。

navbar.tsx

リーリー

私が試したこと:

• height: "height" を transitionProperty として tailwind.config.js
に追加しました
• 欠落している可能性がある overflow-hidden クラス名をメニュー クラスに追加します
• ドロップダウン メニューのクラスで transition-all と transition-[height] を切り替えます

現在の動作: 現在の動作の GIF

私が期待していること:

• ドロップダウンは、イーズイン遷移タイミング関数を使用して、500 ミリ秒以内に高さ 0 から最大高さ 10 レム (max-h-40) まで遷移する必要があります。

Answer 1

問題の説明

DOMマウント

コード スニペットによる条件付きレンダリング:

リーリー

要素が DOM にマウントされているか、DOM の外部にマウントされていることを示します。トランジションは、要素がマウント/アンマウントされるのと同じフレームでは再生されません。

CSS プロパティの変換

また、メニュー コンテナの条件クラスを使用して、さまざまな CSS プロパティを変更できます。

リーリー

max-h-40 は max-height: 10rem に対応し、h-0 は height: 0 に対応します。これは、max-height と height の 2 つの値の初期値を変更することを意味します。 MDN によると、max-height の初期値は none、height の初期値は です。 auto. これらの値は、showMenu に対して次のように変化します:

＃＃＃＃＃＃真実＃＃＃＃＃＃ ＃＃＃＃＃＃間違い＃＃＃＃＃＃ 10レム ＃＃＃＃＃＃なし＃＃＃＃＃＃ 自動0

メニューを表示		最大高さ
＃＃＃＃＃＃身長＃＃＃＃＃＃