多个元素的相同IntersectionObserver-如何使用classList.add()正确定位相交元素

Question

我正在使用Ziyad和Ruslan Korkin在这里提供的很棒的代码，但当我想在entry.target上使用Classlist时，我会被卡住。。。classList.add或classList.remove无法按预期工作。

在这段代码中元素相交的部分，我如何正确地将一个相交的元素作为目标，并在上面的classList中添加/删除类？我可以在那里激发一些JS(.remove有效(，但classList.add不行。我错过了什么？

let observerOptions = {
rootMargin: '0px',
threshold: 0.5
}
var observer = new IntersectionObserver(observerCallback, observerOptions);
function observerCallback(entries, observer) {
entries.forEach(entry => {
if(entry.isIntersecting) {
//do something
// want to do entry.target.classList.add('square-transition');
}
// want to do entry.target.classList.remove('square-transition');
});
};
let target = '.targetSelector';
document.querySelectorAll(target).forEach((i) => {
if (i) {
observer.observe(i);
}
});

Answer 1

您缺少一个else语句，该语句将在条目不相交时触发。

function observerCallback(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('square-transition');
} else {
entry.target.classList.remove('square-transition');
}
});
};