React+Tailwind CSS抽屉组件关闭动画丢失问题排查

你通过{open && ...}做条件渲染，当open变为false时，Drawer和遮罩层会被直接从DOM中卸载——Material Tailwind的Drawer组件需要保持挂载状态，通过自身的open属性控制显示/隐藏，才能完整执行关闭动画，直接卸载会导致动画还没跑完就被移除。

1. 移除条件渲染包裹，让Drawer和遮罩层始终存在于DOM中
2. 用open状态控制遮罩层的显示/隐藏（通过Tailwind的透明度与过渡类实现动画）
3. 保留Drawer组件的open属性，由组件自身处理开/关动画逻辑

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-40 bg-black bg-opacity-50 backdrop-blur-sm transition-opacity duration-300 ${open ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`} 
                onClick={closeDrawer}
            ></div>
            
            {/* Drawer始终挂载，通过open属性控制动画状态 */}
            <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>
    );
}

export default Menu;

• 遮罩层添加了transition-opacity duration-300实现淡入淡出，用pointer-events-none在隐藏时禁止点击，避免干扰页面其他交互
• Drawer组件的动画由Material Tailwind内部处理，只要保持挂载状态，通过open属性切换就能正常触发开/关动画

内容的提问来源于stack exchange，提问作者nikolaPantelic98