如何添加动画？

Question

如何在此 javascript 代码中添加淡出动画？

document.getElementById("mt-alerts").style.display="block";
setTimeout(function(){
    document.getElementById("mt-alerts").style.display="none";
}, 2000);

Answer 1

您应该为每个动画制作类，并且 JS 应该只更改项目的类。你可以用这个方法，制作你自己的动画。

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>

Answer 2

为此，您需要从不透明度开始，而不是使用显示。

我们的想法是简单地降低元素的不透明度，直到它达到 0，然后将其显示设置为 none。要淡入淡出，您可以反向重复这个想法。

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>

如何添加动画？

How to add animation?

javascript

fadeout