So lösen Sie das Problem der Schließanimation der React-Schubladenkomponente von Tailwind CSS

Question

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.

Das Problem ist, dass in meiner Implementierung die Schlussanimation verloren geht (die Eröffnungsanimation bleibt normal).

Werfen wir einen Blick auf diese Komponente:

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;

Wir müssen uns keine Gedanken über die Komponente AddRecordsTabs machen, da sie im Grunde nur die Funktionalität zum Schließen der Schublade übergibt.

Was habe ich falsch gemacht? Was ist falsch?

Answer 1

考虑移除围绕 Drawer 的条件渲染。这将在任何动画发生之前完全从页面中移除 Drawer 的 DOM。

请参阅 StackBlitz 上的实时实现。https://stackblitz.com/edit/vitejs-vite-npqpjg?file=src%2FApp.jsx