beecomci / today_i_learned

0 stars 0 forks source link

visibility + opacity에 transition #14

Open beecomci opened 3 years ago

beecomci commented 3 years ago

이슈

Animatable

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

visibility + opacity 사용한 fadeIn/fadeOut

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');
}