I have a doubt when using the Animate CSS library I can apply it only once but I want it to apply another output effect when I click on the icon and that's where I don't get it.
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>So if you realize the closure doesn't do the animation for me, it's supposed to call the selector and apply the new class to it but it doesn't work. can you help me please?