내일배움캠프 16일차 TIL - 모달

Fade-in

js

  // 애니메이션을 위해 fadein 클래스 추가
  modalContent.classList.add("fadein");

css

/* 페이드인 애니메이션 */
.modalContent.fadein {
  animation: fadein 250ms ease-in-out;
}

@keyframes fadein {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

클래스를 추가해서 애니메이션을 넣어 보았는데,
이것은 모달이 열고 닫힐 때 hidden 클래스를 사용하는 것을 응용한 것이다.

고민해야 할 사항

• fade-out은 어떻게 구현할 것인가?
  : 비슷한 원리로 모달을 닫는 함수와 fadeout클래스를 연결해서 해보려고 했는데, 잘 작동하지 않아서 우선 다른 기능을 먼저 구현하기 위해 보류한 상태이다.

스크롤

모달 창 스크롤

  overflow-y: auto;

css 파일에서는 overflow 외에도 overflow-y, overflow-x로 좌우/상하 스크롤을 각각 제어할 수 있다.

모달 바깥 스크롤 방지

if (isOpen) {
  document.main.style.overflowY = "hidden";
} else {
  document.main.style.overflowY = "auto";
}

js에서 스타일을 조정할 때는 '-'을 사용할 수 없기 때문에 overflowY, overflowX를 대신 사용할 수 있다.

팀에서 구현 중인 다른 기능 때문에 overflowX는 hidden으로 고정되어 있고 고정되어야 하기 때문에 Y만을 조정해주었지만,
일반적인 상황에서는 그냥 overflow를 hidden으로 설정하도록 하면 될 것 같다.

isOpen이라는 변수를 추가하여 조건문으로 바깥 부분의 상하스크롤 가능 여부를 조정한다.

고민해야 할 사항

• 앞의 fadein 같은 사항도 이런 방식으로 통합하는 게 더 깔끔할지 고민이 된다.