我有一个网站，当用户加载页面时，我希望标题一从左侧滑入，并将其不透明度更改为 1。对于标题二，我只想更改不透明度。但由于某种原因，它会立即执行，而不是超过 2 秒。
这是我在这里发表的第一篇文章，我觉得我很愚蠢，但我们将不胜感激所有帮助。 如果您需要任何其他信息，请告诉我。
这是我复制问题的基本代码：
document.addEventListener("DOMContentLoaded", function() {
setTimeout(function() {
var headingOne = document.querySelector(".header-one-hiding");
var headingTwo = document.querySelector(".header-two-hiding");
headingOne.classList.remove("header-one-hiding");
headingOne.classList.add("header-one-show");
headingTwo.classList.remove("header-two-hiding");
headingTwo.classList.add("header-two-show");
}, 1000);
});.header-one-hiding {
opacity: 0;
left: -1000px;
position: relative;
transition: opacity 2s ease, left 2s ease;
}
.header-one-show {
opacity: 1;
left: 0px;
}
.header-two-hiding {
opacity: 0;
transition: opacity 2s ease;
}
.header-two-show {
opacity: 1;
}<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="header-one-hiding">Header One</div>
<div class="header-two-hiding">Header Two</div>
</body>
</html>您将从元素中删除
-hidingtransitiondocument.addEventListener("DOMContentLoaded", function() {
setTimeout(function() {
var headingOne = document.querySelector(".header-one-hiding");
var headingTwo = document.querySelector(".header-two-hiding");
headingOne.classList.remove("header-one-hiding");
headingOne.classList.add("header-one-show");
headingTwo.classList.remove("header-two-hiding");
headingTwo.classList.add("header-two-show");
}, 1000);
});.header-one {
position: relative;
transition: opacity 2s ease, left 2s ease;
}
.header-two {
transition: opacity 2s ease;
}
.header-one-hiding {
opacity: 0;
left: -1000px;
}
.header-one-show {
opacity: 1;
left: 0px;
}
.header-two-hiding {
opacity: 0;
}
.header-two-show {
opacity: 1;
}<!DOCTYPE html>
<html>
<head></head>
<body>
page loaded (for debugging)
<div class="header-one header-one-hiding">Header One</div>
<div class="header-two header-two-hiding">Header Two</div>
</body>
</html>