Tailwind CSS의 React 서랍 구성요소의 애니메이션 닫기 문제를 해결하는 방법

Question

제 React 프로젝트에서도 tailwind CSS를 사용했는데, 메뉴에서 아이콘을 클릭하면 서랍이 열리는 기능을 구현했습니다.

문제는 제가 구현한 경우 닫는 애니메이션이 손실된다는 것입니다(시작 애니메이션은 정상적으로 유지됩니다).

다음 구성요소를 살펴보겠습니다.

'react'에서 React, { useState } 가져오기;
"react-router-dom"에서 {Link}를 가져옵니다.
"@heroicons/react/24/solid"에서 {PlusCircleIcon}을 가져옵니다.
"../record/AddRecordTabs"에서 AddRecordTabs를 가져옵니다.
"@material-tailwind/react"에서 {Drawer}를 가져옵니다.

const 메뉴 = () =>
    const [open, setOpen] = React.useState(false);

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

    React.useEffect(() => {
        만약 (열기) {
            document.body.style.overflow = "숨김";
        } 또 다른 {
            document.body.style.overflow = "자동";
        }
    }, [열려 있는]);

    반품 (
        <div className="고정된 하단-0 왼쪽-0 w-full bg-white z-50 border-t-1 border-green-900">
            <div className="h-[60px] 플렉스 항목-중심 정당화-사이">

                <div className="flex items-center justify-center flex-grow">
                    <Link onClick={openDrawer}>
                        <PlusCircleIcon color="green" className="w-12 h-12" 스트로크Width={2} />
                    </링크>
                </div>

            </div>
            
            {열기 &&
                <>
                    <div className="고정된 상단-0 왼쪽-0 오른쪽-0 하단-0 z-0 bg-black bg-opacity-50 배경흐림-sm" onClick={() => }></div>
                    <div>
                        <서랍
                            배치="하단"
                            열다={열다}
                            onClose={() => closeDrawer()}
                            크기={window.innerHeight * 0.9}
                            className="pt-2 bg-green-50 경계-t-1 경계-녹색-900 둥근-t-[10px]"
                        >
                            <div className=" h-full Overflow-y-auto">
                                <div className="flex items-center justify-between">
                                    <AddRecordTabs closeDrawer={closeDrawer} />
                                </div>
                            </div>
                        </서랍>
                    </div>
                </>
            )}
        </div>
    );
}

기본 메뉴 내보내기;

AddRecordsTabs 구성 요소와 전달된 값은 기본적으로 서랍을 닫는 기능을 전달하는 것이므로 걱정할 필요가 없습니다.

내가 뭘 잘못했나요? 뭐가 문제 야?

Answer 1

주변 DOM을 제거하는 것을 고려하세요 Drawer 的条件渲染。这将在任何动画发生之前完全从页面中移除 Drawer.

StackBlitz에서 실시간 구현을 확인하세요. https://stackblitz.com/edit/vitejs-vite-npqpjg?file=src%2FApp.jsx