How to solve the problem of closing animation of React drawer component of Tailwind CSS

Question

In my React project, I also used tailwind CSS, and I implemented the function of opening the drawer after clicking the icon in the menu.

The problem is that in my implementation the closing animation is lost (the opening animation remains normal).

Let’s take a look at this component:

import React, { useState } from 'react';
import {Link} from "react-router-dom";
import {PlusCircleIcon} from "@heroicons/react/24/solid";
import AddRecordTabs from "../record/AddRecordTabs";
import {Drawer} from "@material-tailwind/react";

const Menu = () => {
    const [open, setOpen] = React.useState(false);

    const openDrawer = () => {
        setOpen(true);
    };
    const closeDrawer = () => {
        setOpen(false);
    };

    React.useEffect(() => {
        if (open) {
            document.body.style.overflow = "hidden";
        } else {
            document.body.style.overflow = "auto";
        }
    }, [open]);

    return (
        <div className="fixed bottom-0 left-0 w-full bg-white z-50 border-t-1 border-green-900">
            <div className="h-[60px] flex 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>
            
            {open && (
                <>
                    <div className="fixed top-0 left-0 right-0 bottom-0 z-0 bg-black bg-opacity-50 backdrop-blur-sm" onClick={() => { closeDrawer(); } }></div>
                    <div>
                        <Drawer
                            placement="bottom"
                            open={open}
                            onClose={() => closeDrawer()}
                            size={window.innerHeight * 0.9}
                            className="pt-2 bg-green-50 border-t-1 border-green-900 rounded-t-[10px]"
                        >
                            <div className=" h-full overflow-y-auto">
                                <div className="flex items-center justify-between">
                                    <AddRecordTabs closeDrawer={closeDrawer} />
                                </div>
                            </div>
                        </Drawer>
                    </div>
                </>
            )}
        </div>
    );
}

export default Menu;

We don't need to worry about the AddRecordsTabs component and the value passed, since it's basically just passing the functionality to close the drawer.

What did I do wrong? What's wrong?

Answer 1

Consider removing conditional rendering around Drawer. This will completely remove the Drawer's DOM from the page before any animation occurs.

See the live implementation on StackBlitz. https://stackblitz.com/edit/vitejs-vite-npqpjg?file=src/App.jsx