css+js)display:none 애니메이션 효과

HTML

<div class="trigger">클릭하면 display:none을 block로 변경</div>
<div class="hidden">display:none/block 처리 될 영역</div>

CSS

.hidden {
  display: none;
}
.appear {
  animation: fade-in 1s;
  animation-fill-mode: forwards;
  display: block;
}
.disappear {
  animation: fade-out 1s;
  animation-fill-mode: forwards;
}
@keyframes fade-in {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes fade-out {
  from {opacity: 1;}
  to {opacity: 0;}
}

JS

const button = document.querySelector('.trigger');
const onOffBox = document.querySelector('.hidden');

button.addEventListener('click', function(){
  if(onOffBox.classList.contains('hidden')){
    onOffBox.classList.remove('hidden','disappear');
    onOffBox.classList.add('appear');
  } else {
    onOffBox.classList.add('hidden','disappear');
    setTimeout(function(){onOffBox.classList.remove('appear')},1000);
  }
});

참고 사이트

https://jsfiddle.net/hyungsub08/p5f9a8j0/61/