Comment résoudre le problème de l'animation de fermeture du composant de tiroir React de Tailwind CSS
<p>Dans mon projet React, j'ai également utilisé tailwind CSS et j'ai implémenté la fonction d'ouverture du tiroir après avoir cliqué sur l'icône dans le menu. </p>
<p>Le problème est que dans mon implémentation, l'animation de fermeture est perdue (l'animation d'ouverture reste normale). </p>
<p>Jetons un coup d'oeil à ce composant :</p>
<pre class="brush:php;toolbar:false;">importer React, { useState } depuis 'react';
importer {Link} depuis "react-router-dom" ;
importer {PlusCircleIcon} depuis "@heroicons/react/24/solid" ;
importer AddRecordTabs depuis "../record/AddRecordTabs" ;
importer {Drawer} depuis "@material-tailwind/react" ;
const Menu = () =>
const [open, setOpen] = React.useState(false);
const openDrawer = () =>
setOpen(vrai);
} ;
const closeDrawer = () =>
setOpen(faux);
} ;
React.useEffect(() => {
si (ouvrir) {
document.body.style.overflow = "caché" ;
} autre {
document.body.style.overflow = "auto";
}
}, [ouvrir]);
retour (
<div className="fixed bottom-0 left-0 w-full bg-white z-50 border-t-1 border-green-900">
<div className="h-[60px] flex éléments-centre justifier-entre">
<div className="flex items-center justifier-centre flex-grow">
<Link onClick={openDrawer}>
<PlusCircleIcon color="vert" className="w-12 h-12" StrokeWidth={2} />
</Lien>
</div>
</div>
{ouvrir &&
≪>
<div className="fixed top-0 left-0 right-0 bottom-0 z-0 bg-black bg-opacity-50 background-blur-sm" onClick={() => }></div>
<div>
<Tiroir
placement = "en bas"
ouvert={ouvert}
onClose={() => fermerDrawer()}
taille = {window.innerHeight * 0,9}
className="pt-2 bg-green-50 border-t-1 border-green-900 arrondi-t-[10px]"
>
<div className=" h-full overflow-y-auto">
<div className="éléments flexibles-centre justifier-entre">
<AddRecordTabs closeDrawer={closeDrawer} />
</div>
</div>
</Tiroir>
</div>
≪/>
)}
</div>
);
}
exporter le menu par défaut ;</pre>
<p>Nous n'avons pas à nous soucier du composant <code>AddRecordsTabs</code> et de la valeur transmise, car il s'agit simplement de transmettre la fonctionnalité permettant de fermer le tiroir. </p>
<p>Qu’ai-je fait de mal ? Qu'est-ce qui ne va pas? </p>
