반응형 모달 슬라이딩 애니메이션

Question

반응 및 CSS에 모달을 구현했으며 현재 열 때 모달이 아래쪽에서 위로 미끄러지는 슬라이드 업 애니메이션을 구현했지만 닫을 때 아래로 미끄러지기를 원하지만 그럴 수 없습니다. 슬라이드 다운 애니메이션을 정확하게 만드는 방법을 알아내려면 누구든지 도와줄 수 있나요? 코드=>

가져오기 "./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>
  );
}

css 코드=>

.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;
}

코드 샌드박스 링크 => https://codesandbox.io/s/dark-river-6ckllv?file=/src/styles.css

Answer 1

상태에 따라 모드의 클래스를 변경해야 합니다. (조건부 클래스 이름)

원하는 콘텐츠로 패턴을 만드는 쉬운 방법은 다음과 같습니다.

먼저 CSS 애니메이션을 정의합니다.

으아악

그런 다음 React 구성 요소에 상태 변수를 추가하여 모달을 켜야 하는지 꺼야 하는지 추적하세요.

으아악

사용자가 버튼을 클릭하거나 모달을 열기 위해 다른 작업을 수행하면 isOpen 상태를 true로 설정합니다.

으아악

마지막으로 isOpen 상태를 기반으로 모드에 CSS 클래스를 조건부로 적용합니다.

으아악

추가 설명:

isOpen状态为true时，模态组件中会添加modal-slide-down类，从而触发向下滑动动画。当 isOpen 状态为 false 时，modal-slide-down 클래스가 제거되면 슬라이드업 애니메이션이 실행됩니다.

이러한 변경 사항으로 인해 모달은 열릴 때 아래로 슬라이드되고 닫히면 다시 위로 슬라이드됩니다. 물론 특정 사용 사례에 맞게 애니메이션 지속 시간과 기타 CSS 속성을 조정해야 할 수도 있습니다.

문제가 해결되었길 바랍니다.