Skip to main content
título editado
Enlace
Rocks
  • 35
  • 5

Como animohago un fadeIn y FadeOut a un texto que pasa por un arraycambia al hacer click?

Origen Enlace
Rocks
  • 35
  • 5

Como animo un texto que pasa por un array al hacer click?

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;

  }

}