<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>