반응형 모달 슬라이딩 애니메이션
<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>
