Minha resolução ficou assim!

Criei duas classes em css. A "invisible" para ocultar a lista e a "fadeOut" para dar um efeito melhor quando esconder a lista. Classes css

.invisible {
    display: none;
  }

  .fadeOut {
    opacity: 0;
    transition: 0.5s;
}

//-----------------------------------------------------------------

Inicio do arquivo javascript

const lista = document.querySelector('ul');
document.querySelector("#botao").addEventListener("click", ()=>{
    if (lista.className == "lista fadeOut invisible") {
        lista.classList.remove("fadeOut")
        setTimeout(function(){
            lista.classList.remove("invisible")
          },500)  
    }else{
        lista.classList.add("fadeOut")
        setTimeout(function(){
            lista.classList.add("invisible")
          },500)
    }
})