So lösen Sie das Problem der Schließanimation der React-Schubladenkomponente von Tailwind CSS
<p>In meinem React-Projekt habe ich auch Rückenwind-CSS verwendet und die Funktion implementiert, die Schublade nach dem Klicken auf das Symbol im Menü zu öffnen. </p>
<p>Das Problem ist, dass in meiner Implementierung die Schlussanimation verloren geht (die Eröffnungsanimation bleibt normal). </p>
<p>Werfen wir einen Blick auf diese Komponente:</p>
<pre class="brush:php;toolbar:false;">import React, { useState } from 'react';
{Link} aus „react-router-dom“ importieren;
importiere {PlusCircleIcon} aus „@heroicons/react/24/solid“;
AddRecordTabs aus „../record/AddRecordTabs“ importieren;
{Drawer} aus „@material-tailwind/react“ importieren;
const Menu = () =>
const [open, setOpen] = React.useState(false);
const openDrawer = () =>
setOpen(true);
};
const closeDrawer = () =>
setOpen(false);
};
React.useEffect(() => {
if (offen) {
document.body.style.overflow = "versteckt";
} anders {
document.body.style.overflow = "auto";
}
}, [offen]);
zurückkehren (
<div className="fixed bottom-0 left-0 w-full bg-white z-50 border-t-1 border-green-900">
<div className="h-[60px] flexible items-center justify-between">
<div className="flex items-center justify-center flex-grow">
<Link onClick={openDrawer}>
<PlusCircleIcon color="green" className="w-12 h-12" StrokeWidth={2} />
</Link>
</div>
</div>
{öffnen && (
<>
<div className="fixed top-0 left-0 right-0 bottom-0 z-0 bg-black bg-opacity-50 background-blur-sm" onClick={() => }></div>
<div>
<Schublade
Platzierung = „unten“
open={open}
onClose={() =>
size={window.innerHeight * 0,9}
className="pt-2 bg-green-50 border-t-1 border-green-900 abgerundet-t-[10px]"
>
<div className=" h-full overflow-y-auto">
<div className="flex items-center justify-between">
<AddRecordTabs closeDrawer={closeDrawer} />
</div>
</div>
</Schublade>
</div>
</>
)}
</div>
);
}
Standardmenü exportieren;</pre>
<p>Wir müssen uns keine Gedanken über die Komponente <code>AddRecordsTabs</code> machen, da sie im Grunde nur die Funktionalität zum Schließen der Schublade übergibt. </p>
<p>Was habe ich falsch gemacht? Was ist falsch? </p>
