解决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%2FApp.jsx