В общем сделал таким способом, но не нравится то, что первое и последнее изображение быстро пропадают (удаляется класс visible). Это можно как то отрегулировать? Какой только threshold не пробовал, не подходит.
const items = Array.from(document.querySelectorAll('.grid .block'));
const imgs = document.querySelectorAll('.fading img');
function detectIntersection(entries) {
for (let e of entries) {
let i = items.indexOf(e.target);
if (e.isIntersecting) {
requestAnimationFrame(ts => {
e.target.classList.add('visible');
imgs[i].classList.add('visible');
});
} else {
e.target.classList.remove('visible');
imgs[i].classList.remove('visible');
}
}
}
const options = {
threshold: 0.5
};
const observer = new IntersectionObserver(
detectIntersection, options
);
items.forEach(i => observer.observe(i));
