Question

我正在为我的一个小游戏创建简介页面，我希望文本在短暂的延迟后消失，但是不会显示。

window.onload = function() {
  setTimeout(function() {
    document.getElementById("welcome").className = "show";
  }, 2000);
  setTimeout(function() {
    document.getElementById("to").className = "show";
  }, 2500);
  setTimeout(function() {
    document.getElementById("title").className = "show";
  }, 3000);
  setTimeout(function() {
    document.getElementById("subtitle").className = "show";
  }, 4000);
};

.hide {
  opacity: 0;
  transition: opacity linear 1s;
}

.show {
  opacity: 1;
  transition: opacity linear 1s;
} // changed visibility to opacity on Jon Warren's suggestion

<div id="welcome-text">
  <span id="welcome" class="hide">Welcome...</span><br/>
  <span id="to" class="hide">to</span>
  <p id="title" class="hide">[TITLE]</p>
  <p id="subtitle" class="hide">a choose your own adventure game.</p>
</div>

我希望结果是一次将文本淡入一行（由我的CSS代码提供淡入淡出，而由js代码实际出现），但文本会卡在.hide类中

还有，有没有一种方法可以使js代码更简洁？

Answer 1

首先，您的JavaScript有点破损。您在超时结束时加上的分号实际上应该放在括号之外，如下所示：

window.onload = function() {
  setTimeout(function() {
    document.getElementById("welcome").className = "show";
  }, 2000);
  setTimeout(function() {
    document.getElementById("to").className = "show";
  }, 2500);
  setTimeout(function() {
    document.getElementById("title").className = "show";
  }, 3000);
  setTimeout(function() {
    document.getElementById("subtitle").className = "show";
  }, 4000);
};

第二，可见性不是范围属性，这意味着它不知道可见和隐藏之间的内容。不过，您可以使用不透明度，而是尝试以下方法：

.hide {
    opacity: 0;
    transition: opacity linear 1s;
}
.show {
    opacity: 1;
    transition: opacity linear 1s;
}

我需要帮助来确定和解决淡入文本的问题

1 个答案: