fadein, fadeout으로 창 띄우기. visibility

transition을 주면서 html요소를 보여주고 숨기려면,

display block, display none으로는 애니메이션이 안먹는다.

 

display대신에 visibility: hidden;  visibility: visible; 이 속성과 opacity:0 opacity:1을 같이 사용해주면 된다.

.modal-background.show {
      /* display: block; */
      visibility: visible;
      opacity: 1;
    }

    .modal-background {
      /* display: none; */
      visibility: hidden;
      background-color: rgba(0, 0, 0, 0.8);
      position: fixed;
      bottom: 0;
      right: 0;
      top: 0;
      left: 0;
      z-index: 100;

      opacity: 0;
      transition: all 2s;
    }

 

 

참고로 슬라이드로 접히고 펴지고 하는건, 

height:0px 으로 없애면 되는데, 이때 overflow: hidden을 잊지않고 적용해준다.