Comment résoudre le problème de l'animation de fermeture du composant de tiroir React de Tailwind CSS

Question

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.

Le problème est que dans mon implémentation, l'animation de fermeture est perdue (l'animation d'ouverture reste normale).

Jetons un coup d'oeil à ce composant :

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 ;

Nous n'avons pas à nous soucier du composant AddRecordsTabs et de la valeur transmise, car il s'agit simplement de transmettre la fonctionnalité permettant de fermer le tiroir.

Qu’ai-je fait de mal ? Qu'est-ce qui ne va pas?

Answer 1

Pensez à supprimer le DOM entourant Drawer 的条件渲染。这将在任何动画发生之前完全从页面中移除 Drawer.

Voir l'implémentation en direct sur StackBlitz. https://stackblitz.com/edit/vitejs-vite-npqpjg?file=src%2FApp.jsx