0

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;

  }

}

3 respuestas 3

2

No sé si hay otras maneras, pero yo lo haría así, primero al botón con CSS tenes que darle un tiempo de transición a opacity

transition: opacity .5s ease;

Luego con JavaScript en la función de next() en vez de cambiar el texto directamente, primero quita la opacidad y para dejar tiempo entre las transiciones usa un setTimeOut que cambie el texto mientras devuelves la opacidad.

function next() {
    if(pos < fraces.length-1) {
        pos++;
        animarTitulo();
    }
}

function animarTitulo() {
    titulo.style.opacity = '0';

    setTimeout(() => {
        let nextFrase = fraces[pos];

        titulo.innerHTML = nextFrase; 
        titulo.style.opacity = '1'; 

        compara(nextFrase);
    }, 500);
}
1
  • 1
    Muchas gracias, por responder, la verdad no se me ocurria otra cosa mas , Asi que gracias.
    – Rocks
    el 23 feb. 2022 a las 22:30
0

Podrías también hacerlo todo por JavaScript de la siguiente manera, es decir modifica valores de CSS pero no debes agregar nada a mano en el mismo.

//Elemento que cambiará y sobre el cual se presionará click//
const textToChange = document.querySelector("#textToChange");

// listener sobre el elemento, al presionar click llama al fadeOut
// luego espera 700 ms cambia el texto (aquí harás tu cambio), y finalmente llama al fadeIn para mostrar nuevo texto.
textToChange.addEventListener("click", () => {
  fadeOut(textToChange);
  setTimeout(() => {
    textToChange.textContent = "prueba";
    fadeIn(textToChange);
  }, 900); // Tiempo que espera anters de cambiar el valor y hacer el fadeIn
});

// ** FADE OUT FUNCTION **
function fadeOut(el) {
  el.style.opacity = 1;
  (function fade() {
      // cambiando el valor 0.1 se puede afectar la velocidad del efecto
      if ((el.style.opacity -= 0.1) < 0) {
      el.style.display = "none";
    } else {
      requestAnimationFrame(fade);
    }
  })();
}

// ** FADE IN FUNCTION **
function fadeIn(el) {
  el.style.opacity = 0;
  el.style.display = "block";
  (function fade() {
    let val = parseFloat(el.style.opacity);
    // cambiando el valor 0.01 se puede afectar la velocidad del efecto
    if (!((val += 0.005) > 1)) { 
      el.style.opacity = val;
      requestAnimationFrame(fade);
    }
  })();
}

Están las funciones por separado para reutilizar la que necesites las veces que necesites, solo debes pasarle como parametro el elemento al cual le aplicarás el afecto, también agregué algunos comentarios que pueden serte útiles.

El código parece muy largo, pero quitando los comentarios podrás ver que son pocas líneas de código.

2
  • Muchas gracias, justamente estaba buscando algo así, que sea js puro. Gracias
    – Rocks
    el 25 feb. 2022 a las 14:00
  • Me alegra mucho que te sea útil, favor si es posible marcar como correcta la respuesta si consideras que lo es. Muchas gracias! el 25 feb. 2022 a las 15:19
0

Alfinal se me ocurrio esta idea por si alguien necesita una solucion, no si es la mas eficas pero bueno vere otras soluciones en el paso del tiempo. Cualquiera que quiera dar otra solucion estoy para leerlos. Gracias igual. Espero que les ayude a alguno.

.fadein{
  animation: fadein 0.5s linear;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


let pos = -1;

function next() {
    pos = pos + 1;
    let nextFraces = fraces[pos];
    titulo.innerHTML = nextFraces;
    comparar(titulo.textContent);
    setTimeout(()=>{titulo.classList.toggle('fadein');},300); 
    
};

//Cambiar el titulo al hacer click

boton.onclick = function () {
    next();
    titulo.className += ' fadein';   
}```

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.