Tailwind CSS の React ドロワーコンポーネントの閉じるアニメーションの問題を解決する方法
<p>私の React プロジェクトでも、tailwind CSS を使用し、メニューのアイコンをクリックするとドロワーが開く機能を実装しました。 </p>
<p>問題は、私の実装では終了アニメーションが失われることです (開始アニメーションは正常のままです)。 </p>
<p>このコンポーネントを見てみましょう:</p>
<pre class="brush:php;toolbar:false;">import React, { useState } from 'react';
「react-router-dom」から {Link} をインポートします。
"@heroicons/react/24/solid" から {PlusCircleIcon} をインポートします。
"../record/AddRecordTabs" から AddRecordTabs をインポートします。
「@material-tailwind/react」から {Drawer} をインポートします。
const メニュー = () => {
const [open, setOpen] = React.useState(false);
const openDrawer = () => {
setOpen(true);
};
const closeDrawer = () => {
setOpen(false);
};
React.useEffect(() => {
if (オープン) {
document.body.style.overflow = "非表示";
} それ以外 {
document.body.style.overflow = "自動";
}
}、 [開ける]）;
戻る （
<div className="固定下-0 左-0 w-フル背景-白 z-50 ボーダー-t-1 ボーダー-グリーン-900">
<div className="h-[60px] flex items-center justify-between">
<div className="flex items-center justify-center flex-grow">
<Link onClick={openDrawer}>
<PlusCircleIcon color="green" className="w-12 h-12" ストローク幅={2} />
</リンク>
</div>
</div>
{開く && (
<>
<div className="固定上-0 左-0 右-0 下-0 z-0 bg-black bg-opacity-50 backdrop-blur-sm" onClick={() => { closeDrawer(); } }>
<div>
<ドロワー
配置 = "下"
開く={開く}
onClose={() => closeDrawer()}
サイズ={window.innerHeight * 0.9}
className="pt-2 bg-green-50 border-t-1 border-green-900rounded-t-[10px]"
>
<div className=" h-full overflow-y-auto">
<div className="flex items-center justify-between">
<AddRecordTabs closeDrawer={closeDrawer} />
</div>
</div>
</引き出し>
</div>
</>
)}
</div>
);
}
デフォルトのメニューをエクスポート;</pre>
<p>基本的にドロワーを閉じる機能を渡すだけなので、<code>AddRecordsTabs</code> コンポーネントと渡される値について心配する必要はありません。 </p>
<p>何を間違えたのでしょうか?どうしたの？ </p>
