[CSS] display: none 애니메이션 적용하기 (fade in, out)

<style>
.hidden {
  display: none;
  opacity: 0;
}

.appear {
  animation: fade-in 1s;
  animation-fill-mode: forwards;
  display: flex;
}

.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;
  }
}

.container {
  font-family: sans-serif;
}


.test-button {
  border: 1px solid #ddd;
  padding: 1rem;
  background: #f5f5f5;
  cursor: pointer;
  text-align: center;
  margin: 1rem;
}

.test-button:hover {
  background: #eee;
}
</style>


<div class="container">
  <div class="trigger test-button">클릭하면 display: none을 block으로 변경합니다. </div>
  <div class="hidden test-button">I'm hidden</div>
</div>

<script>
document.querySelector('.trigger').addEventListener('click', function(){
  document.querySelector('.hidden').classList.remove('disappear');
	document.querySelector('.hidden').classList.add('appear');
});

document.querySelector('.hidden').addEventListener('click', function() {
  const target = this;
  if (target.classList.contains('appear')) {
    target.classList.add('disappear');
    setTimeout(function(){ target.classList.remove('appear')},1001);
  }
});