queria preguntarles como puedo hacer que el h1 con id="titulo" tenga una animacion de desvanecimiento cuando se clickea y cambie. No se si se puede hacerlo en javascrip o en css. el tema que logro hacerle la animacion pero solo al primer texto, despues no funciona.
<div class="container text-center py-1">
<h1 id="titulo" class="display-3 py-5">No toques el boton rojo</h1>
<button id="boton" class="btn btn-danger p-3 boton ">Boton</button>
</div>
let titulo = document.getElementById("titulo");
let boton = document.getElementById("boton");
let fraces = [
'Dije que no lo presiones',
'Me cansaste...',
'Mira! Te lo hice invisible, que vas hacer ahora ?'
];
//Cambiar el titulo al hacer click
boton.onclick = function(){
next();
}
//Cambiar el titulo
let pos = -1;
function next(){
pos = pos + 1;
let nextFraces = fraces[pos];
titulo.innerHTML = nextFraces;
compara(titulo.textContent)
};
//Ejecuciones segun el valor del titulo
function compara(texto){
switch(texto){
case 'Mira! Te lo hice invisible, que vas hacer ahora ?':
boton.style.transition = "all 0.5s"; boton.style.opacity = "0";
break;
default:
boton.style.opacity = "1"; boton.style.transition = "all 0s";
break;
}
}