<p>반응 및 CSS에 모달을 구현했으며 현재 열 때 모달이 아래쪽에서 위로 미끄러지는 슬라이드 업 애니메이션을 구현했지만 닫을 때 아래로 미끄러지기를 원하지만 그럴 수 없습니다. 슬라이드 다운 애니메이션을 정확하게 만드는 방법을 알아내려면 누구든지 도와줄 수 있나요? 코드=></p> <pre class="brush:php;toolbar:false;">가져오기 "./styles.css" import 반응, "반응"에서 { useState }; 기본 함수 내보내기 App() { const [isModalOpen, setIsModalOpen] = useState(false); 반품 ( <div> <button onClick={() => setIsModalOpen(true)}>열기 </button> {isModalOpen && <div className={`modal-overlay`}> <div className={`modal-content`}> <div className="feedbackModalHeader"> <img src="/assets/dislike_modal.svg" alt="" className="dislikeBtnNonFilled" /> <p className="provideFeedback">추가 피드백 제공</p> </div> <button onClick={() => setIsModalOpen(false)}> 닫기 </button> </div> </div> )} </div> ); }</pre> <p>css 코드=></p> <pre class="brush:php;toolbar:false;">.modal-overlay { 위치: 고정; 상단: 0; 왼쪽: 0; 오른쪽: 0; 하단: 0; 배경색: rgba(0, 0, 0, 0.5); 디스플레이: 플렉스; 항목 정렬: 중앙; 내용 정당화: 센터; Z-색인: 9999; 전환: 불투명도 0.3초 용이성; } * { 최대 너비: 100%; } .modal-content { 배경: #f5f0f0; 패딩: 20px; 테두리 반경: 4px; 상자 그림자: 0 2px 10px rgba(0, 0, 0, 0.15); Z-색인: 999; 변환: 번역Y(100%); 애니메이션: 앞으로 0.3초 슬라이드업 이지아웃; 너비: 59rem; 테두리 반경: 8px; 여백 왼쪽: 자동; 여백 오른쪽: 자동; 상자 그림자: 0 4px 20px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%); 높이: 21rem; 위치: 상대; 왼쪽: 2rem; } @keyframes 슬라이드업 { 에서 { 변환: 번역Y(100%); } 에게 { 변환: 번역Y(0); } } .닫기 버튼 { 위치: 절대; 상단: 10px; 오른쪽: 10px; 테두리: 없음; 배경: 투명; 글꼴 크기: 24px; 커서: 포인터; } .피드백을 제공하다 { 글꼴 크기: 20px; } .feedbackModalHeader { 디스플레이: 플렉스; 항목 정렬: 중앙; 간격: 1.2rem; 여백 상단: 0.8rem; }</pre> <p>코드 샌드박스 링크 => https://codesandbox.io/s/dark-river-6ckllv?file=/src/styles.css</p>