解決Tailwind CSS的React抽屜元件關閉動畫問題的方法

Question

在我的React專案中，我還使用了tailwind CSS，我實現了在選單中點擊圖示後開啟抽屜的功能。

問題是，在我的實作中關閉動畫遺失了（開啟動畫保持正常）。

讓我們來看這個組件：

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;

我們不需要擔心AddRecordsTabs組件和傳遞的值，因為它基本上只是傳遞了關閉抽屜的功能。

我做錯了什麼？有什麼錯誤？

Answer 1

考慮移除圍繞 Drawer 的條件渲染。這將在任何動畫發生之前完全從頁面中移除 Drawer 的 DOM。

請參閱 StackBlitz 上的即時實作。 https://stackblitz.com/edit/vitejs-vite-npqpjg?file=src/App.jsx