Simular el efecto FadeOut de jQuery usando solo Vanilla JS. La siguiente función javascript fadeOut() consta de 2 parámetros: elemento y duración (este ultimo opcional) para controlar el tiempo que quermeos que dure la animación.
function fadeOut(element, duration = 600) {
element.style.display = '';
element.style.opacity = 1;
var last = +new Date();
var tick = function() {
element.style.opacity = Number(+element.style.opacity - (new Date() - last) / duration).toFixed(4);
last = +new Date();
if (-element.style.opacity <= 0) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
}
};
tick();
}
Demo:
Y para el efecto contrario puedes ver: https://bufa.es/vanilla-js-fadein/
Agradezco tu comentario 🤘