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

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;
}