我有一个网站，当用户加载页面时，我希望标题一从左侧滑入，并将其不透明度更改为 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>最佳答案
您将从元素中删除 -hiding 类，因此 transition 属性也会随之删除。这意味着，当您希望它们转换时，使其转换的部分不再使用。向两个未删除的 header 添加另一个类，以便该属性在显示时不会被删除。
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 {
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>关于javascript - 使用 JavaScript 更改元素的类时，CSS 类中定义的过渡属性不会生效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/76922893/