Bagaimana untuk menyelesaikan masalah penutupan animasi komponen laci React Tailwind CSS
<p>Dalam projek React saya, saya juga menggunakan tailwind CSS, dan saya melaksanakan fungsi membuka laci selepas mengklik ikon dalam menu. </p>
<p>Masalahnya ialah dalam pelaksanaan saya animasi penutup hilang (animasi pembukaan kekal normal). </p>
<p>Mari kita lihat komponen ini:</p>
<pre class="brush:php;toolbar:false;">import React, { useState } daripada 'react';
import {Pautan} daripada "react-router-dom";
import {PlusCircleIcon} daripada "@heroicons/react/24/solid";
import AddRecordTabs daripada "../record/AddRecordTabs";
import {Drawer} daripada "@material-tailwind/react";
const Menu = () =>
const [open, setOpen] = React.useState(false);
const openDrawer = () =>
setOpen(benar);
};
const closeDrawer = () =>
setOpen(false);
};
React.useEffect(() => {
jika (terbuka) {
document.body.style.overflow = "tersembunyi";
} lain {
document.body.style.overflow = "auto";
}
}, [buka]);
kembali (
<div className="tetap bawah-0 kiri-0 w-penuh bg-putih z-50 sempadan-t-1 sempadan-hijau-900">
<div className="h-[60px] item fleksibel-pusat justify-antara">
<div className="flex items-center justify-center flex-grow">
<Pautan onClick={openDrawer}>
<PlusCircleIcon color="green" className="w-12 h-12" strokeWidth={2} />
</Pautan>
</div>
</div>
{buka &&
<>
<div className="fixed top-0 left-0 right-0 bottom-0 z-0 bg-black bg-opacity-50 backdrop-blur-sm" onClick={() => }></div>
<div>
<Laci
penempatan = "bawah"
buka={open}
onClose={() =>
saiz={window.innerHeight * 0.9}
className="pt-2 bg-green-50 border-t-1 border-green-900 rounded-t-[10px]"
>
<div className=" h-full overflow-y-auto">
<div className="flex item-center justify-antara">
<AddRecordTabs closeDrawer={closeDrawer} />
</div>
</div>
</Laci>
</div>
</>
)}
</div>
);
}
eksport Menu lalai;</pra>
<p>Kami tidak perlu risau tentang komponen <kod>AddRecordsTabs</kod> </p>
<p>Apa salah saya? apa salahnya </p>
