essa foi minha solução. sei que existe varias possibilidades de fazer, mas essa foi uma forma de fazer?

javascript

const buttons = document.querySelectorAll("[data-button]"); const listPaint = document.querySelector('.lista')

buttons.forEach((buttonClick) => { buttonClick.addEventListener('click', (evento, ) => { addClass(evento.target.textContent) }) });

function addClass(buttonAction) { if (buttonAction === "Fechar Lista") { listPaint.classList.remove("-animation") return } listPaint.classList.add("-animation") };

=========================== css

.lista { padding: 20px; list-style-type: none; border: 4mm ridge rgba(234, 122, 11, 0.992); transition: .5s; transform: translateY(-20px); opacity: 0; }

.-animation { animation-name: slide; animation-duration: 2s; animation-fill-mode: forwards; }

@keyframes slide { to { transform: translateY(0px); opacity: 1; } }