Tengo una duda al usar la biblioteca CSS de Animate puedo aplicarlo solo una vez pero quiero que aplique otro efecto de salida cuando hago click en el icono y ahí no me sale.
const tocar = document.getElementsByClassName("tocar")[0]; const btn = document.getElementById("mostrar") const cerrar = document.querySelector(".cerrar") function mostrar(){ tocar.addEventListener("click",e=>{ btn.style.display="block"; }) } function close(){ cerrar.addEventListener("click", e =>{ btn.classList.add('animate__animated', 'animate__fadeOutDown') btn.style.display="none" }) } mostrar() close() #mostrar{ display:none; } <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Jan Kelly | A Creative Digital Agency</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> <link rel="stylesheet" href="/css/style.css"> <script src="iconosPro.js"></script> </head> <body> <div class="container-video "> <span class="tocar">toca aquí </span> <p id="mostrar" class="animate__animated animate__zoomInDown">Hola mundo</p> <br> <span class="cerrar">cerrar</span> </div> </body> </html>Entonces, si te das cuenta de que el cierre no hace la animación por mí, se supone que debe llamar al selector y aplicarle la nueva clase, pero no funciona. ¿Puedes ayudarme por favor?