Estoy agregando una clase cuando un div ingresa a la ventana gráfica usando Intersection Observer. Simplemente no puedo entender cómo eliminar la clase cuando el div sale de la ventana gráfica. Esto es lo que tengo hasta ahora:
const callback = function (entries) { entries.forEach(entry => { if(entry.isIntersecting) { entry.target.classList.add('animate1'); observer.unobserve(entry.target) } }); } const observer = new IntersectionObserver(callback); const targets = document.querySelectorAll('.overlay'); targets.forEach(target => { observer.observe(target); })Gracias por tu ayuda Randy. Lo hice funcionar. Aquí está el código final:
const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.intersectionRatio > 0) { entry.target.classList.add('animate1'); } else { entry.target.classList.remove('animate1'); } }) }) const boxElList = document.querySelectorAll('.overlay'); boxElList.forEach((el) => { observer.observe(el); })en lugar de esto
entries.forEach(entry => { if (entry.intersectionRatio > 0) { entry.target.classList.add('animate1'); } else { entry.target.classList.remove('animate1'); } })puede usar toggle() y en lugar de entry.intersectionRadio > 0 puede usar entry.isIntersection
entries.forEach(entry => { entry.target.classList.toggle("animate1",entry.isIntersection) })