2

El problema básicamente es, como puedo hacer la animación igual a la de fadeIn() y fadeOut() en jquery pero con javascript puro. la idea de todo esto es que sea una función dinámica, que cuando uno quiera que un elemento desaparezca simplemente llame a la función y como parámetro le ponga dicho elemento.

Yo he hecho lo siguiente pero no es dinámica. Ademas, estoy seguro de que todo este código se puede reducir y hacer de una forma mejor.

Y si puedes hacer un equivalente a fadeToggle, mejor jeje.

let fadeIn = (i) => { 
  i.classList.add("fadeIn");
  i.classList.remove("fadeOut"); 
}

let fadeOut = (o) => {
// aqui no puedo simplemente quitarle la clase fadeIn ya que se desapareceria de golpe sin hacer ninguna transición, entonces me veo obligado en agregarle una   clase que hace una animacion de opacity 1 a o 

   o.classList.add("fadeOut");
   
   // ahora el problema es que el elemento no desaparecio por completo, es decir se hizo invisible por la animacion pero sigue estorbando. necesito que desaparezca y para eso hice lo siguiente: 
   
   if (document.querySelector('#myDiv')) {
      setTimeout(d_none,600); 
      // si existe el elemento #myDiv ejecuto la funcion una vez que pasen .6s que es lo que tarda en opacarse
   }
}
let d_none = () => {  
  document.querySelector("#myDiv").classList.remove("fadeIn");
 }
 // ahora ya desaparce completamente pero no es dinamico, osea ya no puedo usar la funcion fadeOut con otros parametros porque en ella comprueba si existe el #myDiv y de paso cuando ejecuta la funcion d_none selecciona otra vez al #myDiv y no al que yo quiera.
 
 // en fin.. ese es el problema basicamente, como puedo hacer una funcion que sea dinamica? ademas  seguro que todo este codigo se puede reducir. y eso que no he hablado del fadeToggle jejeje
#myDiv {
  display: none;
  box-shadow: 3px 3px 3px black;
  padding: 30px;
}

.fadeIn {
    opacity: 1;
    display: block !important;
    animation: in .6s;
    animation-fill-mode: forwards;
}
@keyframes in {
    from { opacity: 0; }
    to { opacity: 1; }
}


.fadeOut {
    animation: out .6s;
    animation-fill-mode: forwards;
}
@keyframes out {
    from { opacity: 1; }
    to { opacity: 0; }
}
<button type="button" onclick="fadeIn(document.querySelector('#myDiv'))">fadeIn</button>

<button onclick="fadeOut(document.querySelector('#myDiv'))">fadeOut</button>

<div id="myDiv"> Mi div fadein y fadeout </div>

2 respuestas 2

2

Podrías utilizar el siguiente código:

//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);
    }
  })();
}

Las funciones están por separado y debes pasarle el elemento al que quieres aplicarle el efecto por parámetros, de esta forma podrás reutilizarlas.

1

Encontré este snnipet en codepen y creo que se ajusta a lo que buscas.

(function() {
    var FX = {
        easing: {
            linear: function(progress) {
                return progress;
            },
            quadratic: function(progress) {
                return Math.pow(progress, 2);
            },
            swing: function(progress) {
                return 0.5 - Math.cos(progress * Math.PI) / 2;
            },
            circ: function(progress) {
                return 1 - Math.sin(Math.acos(progress));
            },
            back: function(progress, x) {
                return Math.pow(progress, 2) * ((x + 1) * progress - x);
            },
            bounce: function(progress) {
                for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
                    if (progress >= (7 - 4 * a) / 11) {
                        return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
                    }
                }
            },
            elastic: function(progress, x) {
                return Math.pow(2, 10 * (progress - 1)) * Math.cos(20 * Math.PI * x / 3 * progress);
            }
        },
        animate: function(options) {
            var start = new Date;
            var id = setInterval(function() {
                var timePassed = new Date - start;
                var progress = timePassed / options.duration;
                if (progress > 1) {
                    progress = 1;
                }
                options.progress = progress;
                var delta = options.delta(progress);
                options.step(delta);
                if (progress == 1) {
                    clearInterval(id);
                    options.complete();
                }
            }, options.delay || 10);
        },
        fadeOut: function(element, options) {
            var to = 1;
            this.animate({
                duration: options.duration,
                delta: function(progress) {
                    progress = this.progress;
                    return FX.easing.swing(progress);
                },
                complete: options.complete,
                step: function(delta) {
                    element.style.opacity = to - delta;
                }
            });
        },
        fadeIn: function(element, options) {
            var to = 0;
            this.animate({
                duration: options.duration,
                delta: function(progress) {
                    progress = this.progress;
                    return FX.easing.swing(progress);
                },
                complete: options.complete,
                step: function(delta) {
                    element.style.opacity = to + delta;
                }
            });
        }
    };
    window.FX = FX;
})()

document.getElementById('in').addEventListener('click', function() {
    FX.fadeIn(document.getElementById('myDiv'), {
        duration: 2000,
        complete: function() {
            //alert('Complete');
        }
    });
}, false);


document.getElementById('out').addEventListener('click', function() {
    FX.fadeOut(document.getElementById('myDiv'), {
        duration: 2000,
        complete: function() {
            //alert('Complete');
        }
    });
}, false);
#myDiv {
  box-shadow: 3px 3px 3px black;
  padding: 30px;
}
<p>
  <button id="in">fadeIn</button>
  <button id="out">fadeOut</button>
</p>

<div id="myDiv"> Mi div fadein y fadeout </div>

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.