javascript - 淡入淡出，没有 jQuery

Question

我努力实现以下目标。

我有一篇文章有​​一些内容。当我单击一个按钮时，这篇文章消失了。褪色后，它会获得一个新类，用于以其他方式显示内容。现在我想再次淡入淡出。但我找不到办法做到这一点。

当我执行以下操作时，不透明度从一开始就保持为 1。 transition() 函数由按钮调用。 2000 毫秒后，我调用了一个函数来更改文章的内容。当我仅使用 fadeOut 时，一切正常。但是当我添加 fadeIn() 时，不透明度保持在 1。因此我完全没有淡入淡出。但内容至少还是有变化。

function transition() {
    fadeOut("article");
    setTimeout(listener, 2000);
    fadeIn("article");
}

function fadeOut(element) {
    var ele = document.getElementsByTagName(element);
    ele[0].style.transition = "opacity 2s linear 0s";
    ele[0].style.opacity = 0;
}
function fadeIn(element) {
    var ele = document.getElementsByTagName(element);

    ele[0].style.transition = "opacity 2s linear 0s";
    ele[0].style.opacity = 1;
}

希望有人能给我提示如何解决这个问题。并且请不要对 jQuery 提出任何建议。我想让它变成原生的。

Answer 1

您误解了 setTimeout 的作用。

它总是立即返回，因此您实际上是将不透明度设置为 0，然后立即再次将其设置回 1。

试试这个。

 function transition() {
      fadeOut("article");
      setTimeout(function() { fadeIn("article"); }, 2000);
 }

setTimeout 将创建一个后台计时器并返回，让后台计时器滴答作响。您的 fadeIn 函数将在两秒后被调用。