¿Cómo agregaré una animación de desvanecimiento en este código javascript?
document.getElementById("mt-alerts").style.display="block"; setTimeout(function(){ document.getElementById("mt-alerts").style.display="none"; }, 2000);Debe crear clases para cada animación, y el JS debe cambiar solo las clases de los elementos. Puedes con este método, hacer tus propias animaciones.
const alertMsg = document.getElementById("mt-alerts"); const hide = document.getElementById("hide"); const red = document.getElementById("red"); hide.addEventListener("click", ()=> alertMsg.classList.toggle("hidden")); red.addEventListener("click", ()=> alertMsg.classList.toggle("red")); #mt-alerts { opacity: 1; transition: all 0.5s linear; color: black; } .hidden { opacity: 0!important; } .red { color: red!important; } <div id="mt-alerts">My Alert</div> <button id="hide">Hide/show</button> <button id="red">Make it red</button>En lugar de usar la pantalla, debe comenzar con la opacidad para esto.
La idea es simplemente disminuir la opacidad de su elemento hasta que llegue a 0, luego configure su visualización como ninguno. Para desvanecerse, puede repetir la idea al revés.
function js_fadeOut(targetID, intervalMs, fadeWeight) { var fadeTarget = document.getElementById(targetID); var fadeEffect = setInterval(function () { if (!fadeTarget.style.opacity) { fadeTarget.style.opacity = 1; } if (fadeTarget.style.opacity > 0) { fadeTarget.style.opacity -= fadeWeight; } else { fadeTarget.style.display = "none"; clearInterval(fadeEffect); } }, intervalMs*fadeWeight); } <div id='target' style='padding:8px; background:lightblue;' onclick='js_fadeOut("target", 200, 0.1)'>Click to fadeOut</div>