Tailwind CSS의 React 서랍 구성요소의 애니메이션 닫기 문제를 해결하는 방법
<p>제 React 프로젝트에서도 tailwind CSS를 사용했는데, 메뉴에서 아이콘을 클릭하면 서랍이 열리는 기능을 구현했습니다. </p>
<p>문제는 제가 구현한 경우 닫는 애니메이션이 손실된다는 것입니다(시작 애니메이션은 정상적으로 유지됩니다). </p>
<p>다음 구성요소를 살펴보겠습니다.</p>
<pre class="brush:php;toolbar:false;">'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>
);
}
기본 메뉴 내보내기;</pre>
<p><code>AddRecordsTabs</code> 구성 요소와 전달된 값은 기본적으로 서랍을 닫는 기능을 전달하는 것이므로 걱정할 필요가 없습니다. </p>
<p>내가 뭘 잘못했나요? 뭐가 문제 야? </p>
