Как включать и отключать классы Animate.css в зависимости от видимости с помощью IntersectionObserver в JavaScript? ⇐ CSS

[Anonymous]

Я пытаюсь добавлять и удалять классы Animate.css в разделы моей веб-страницы в зависимости от их видимости в области просмотра. Я использую IntersectionObserver, чтобы определять, когда разделы входят в область просмотра и покидают ее. Однако после того, как я достиг области просмотра раздела, классы Animate.css начинают включаться и выключаться.
PS: мне нужно перезапускать анимацию каждый раз, когда я нахожусь в области просмотра раздела. .
PSS: enter.target.classList.remove('animate__animated', enter.target.dataset.animation); похоже, проблема в этом.
вот мой код:

Код: Выделить всё

Document




body{margin: 0;}
.hidden{opacity: 0;}
#div{background-color: aliceblue; width: 100vw; height: 100vh;}
#h1{height: 100vh; width: 100vw;}




XXXXXXXXX
XXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXX


document.addEventListener('DOMContentLoaded', () => {
const sections = document.querySelectorAll('.hidden');

const observerOptions = {
threshold: 0.5
};

const observerCallback = (entries, observer) => {
entries.forEach(entry => {
console.log(entry.isIntersecting)
if (entry.isIntersecting) {
entry.target.classList.remove('hidden');
entry.target.classList.add('animate__animated', entry.target.dataset.animation);
} else {
entry.target.classList.add('hidden');
entry.target.classList.remove('animate__animated', entry.target.dataset.animation);
}
});
};

const observer = new IntersectionObserver(observerCallback, observerOptions);

sections.forEach(section => {
observer.observe(section);
});
});

Я пробовал изменить параметры IF на более конкретные, изменить eventListener с помощью прокрутки, но это не то, что мне нужно,

Подробнее здесь: https://stackoverflow.com/questions/786 ... -intersect