提问人：Luis Alejandro Lopez de Anda 提问时间：11/17/2023 更新时间：11/17/2023 访问量：49
classList.add（） 在 setTimeout（） 函数中不起作用
classList.add() does not work inside setTimeout() function
问：
我正在使用 Intersection Observer 在视口内隐藏 div 元素。为此，我使用 setTimeOut（） 函数在 2 秒后隐藏 div 元素并使用漂亮的 CSS 过渡，但 classList.add（） 函数似乎在 setTimeout（） 函数中不起作用，以便调用 CSS 过渡来隐藏它。
这是我的 HTML，您可以在其中看到带有 id='sbox' 的 div 元素。 所有部分的高度均为 100vh。
<body>
<section id="page-1" class="primera"></section>
<section id="page-2" class="segunda"></section>
<section id="page-3" class="tercera">
<div id="sbox" class="small-box"></div>
</section>
<script src="js/app.js"></script>
</body>
这是我的CSS：
.primera{
width: 100%;
height 100vh
}
.segunda {
width: 100%;
height: 100vh;
background-color: #cbf3f0;
background: linear-gradient(to bottom, #cbf3f0, #2ec4b6);
}
.tercera {
width: 100%;
height: 100vh;
background-color: #5e60ce;
display: grid;
place-items: center;
.small-box {
width: 50%;
height: 50%;
opacity: 1;
background-color: #ffbf69;
transition: all 5s ease-out;
}
}
.hide {
transition: all 5s ease-out;
opacity: 0;
}
这是我的JS文件：
let options = {
root: null,
threshold: 0.8,
};
function hideBox(entryArray) {
let ibox = document.getElementById("sbox");
if (entryArray[0].isIntersecting) {
setTimeout(() => {
console.log("hiding the first loading element");
ibox.classList.add("hide");
}, 2000);
} else {
ibox.classList.remove("hide");
}
}
let observer = new IntersectionObserver(hideBox, options);
observer.observe(document.getElementById("page-3"));
答：
1赞
Jaromanda X
11/17/2023
#1
由于具有比 更高的 CSS 特异性，因此 中的不透明度被忽略.tercera .small-box.hide.hide
最简单的解决方案是添加
加
&.hide {
opacity: 0;
}
里面.small-box
查看代码片段
let ibox = document.getElementById("sbox");
setTimeout(() => {
console.log("hiding the first loading element");
ibox.classList.add("hide");
}, 2000);.primera {
width: 100%;
height 3em;
}
.segunda {
width: 100%;
height: 3em;
background-color: #cbf3f0;
background: linear-gradient(to bottom, #cbf3f0, #2ec4b6);
}
.tercera {
width: 100%;
height: 3em;
background-color: #5e60ce;
display: grid;
place-items: center;
.small-box {
width: 50%;
height: 50%;
opacity: 1;
background-color: #ffbf69;
transition: all 5s ease-out;
&.hide {
opacity: 0;
}
}
}<section id="page-1" class="primera"></section>
<section id="page-2" class="segunda"></section>
<section id="page-3" class="tercera">
<div id="sbox" class="small-box">a</div>
</section>
评论
.tercera .small-box具有比 - 更高的 CSS 特异性，因此 中的不透明度被忽略.hide.hidesetTimeout