visibility + opacity에 transition

[beecomci]

이슈

• 모달/팝업 열고 닫는 fadeIn/fadeOut 애니메이션 적용시 주의점? 적어봄

Animatable

• Animatable 속성을 갖고 있는 해당 CSS 속성들은 animation과 transition 적용 가능

display, visibility, opacity, pointer-events

can make thing invisible	can make thing unclickable	removes from doc flow	can be transitioned	can be reversed on child
opacity	yes	no	no	yes	no
visibility	yes	yes	no	yes	yes
display	yes	yes	yes	no	no
pointer-events	no	yes	no	no	no

• display는 렌더 트리에서 해당 요소를 없애버리기 때문에 transition과 같이 두 상태에서의 속성 변화를 일정 시간에 거쳐서 일어나도록 하지 못함 (시작점이 없음) -opacity는 숨겨져도 여전히 공간을 차지하고 있고 클릭 가능하기 때문에 이벤트 발생 가능

visibility + opacity 사용한 fadeIn/fadeOut

• opacity만으로 transition을 적용하면 팝업이 보이지 않을 때도 공간 점유 & 영역 클릭이 가능하기 때문에 이벤트가 발생함
• transition까지 사용해서 클릭 발생하지 못하도록 해야함

HTML

<button id="openModal" onclick="clickOpenModal()">OPEN MODAL</button> 
<div id="modal" class="">...</div>

CSS

#modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: visibility 0.2s, opacity 0.2s;
}

#modal.visible {
  opacity: 1;
  visibility: visible;
}

JS

function toggleModal() {
  modal.classList.toggle('visible');
}