我需要帮助识别和修复淡入文本的问题

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() {&nbsp; setTimeout(function() {&nbsp; &nbsp; document.getElementById("welcome").className = "show";&nbsp; }, 2000);&nbsp; setTimeout(function() {&nbsp; &nbsp; document.getElementById("to").className = "show";&nbsp; }, 2500);&nbsp; setTimeout(function() {&nbsp; &nbsp; document.getElementById("title").className = "show";&nbsp; }, 3000);&nbsp; setTimeout(function() {&nbsp; &nbsp; document.getElementById("subtitle").className = "show";&nbsp; }, 4000);};其次，可见性不是一个范围属性，这意味着它不知道可见和隐藏之间是什么。你可以使用不透明度，试试这个：.hide {&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; transition: opacity linear 1s;}.show {&nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; transition: opacity linear 1s;}