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

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;

}