javascript - 在交叉点观察器功能和元素转换完成之前，元素 CSS 属性不会在页面刷新时重置

Question

我有一个网站，我正在使用启动函数向元素添加一个类，然后等待 800 毫秒并在其他两个元素上启动我的交叉点观察器函数。我遇到的问题是，当我在由交叉观察器函数引起的过渡期间刷新页面时，第一个元素没有重置为其原始属性并且第一个函数没有执行。如果我不使用交叉点观察器功能，则不会出现此问题。

我正在使用 Google Chrome 来测试我的项目并启用了实时服务器。

// Get work items
const projects = document.getElementsByClassName('work-item');

// Convert each item to an object and attach observer to each item
function observeLoop() {
for ( i = 0; i < projects.length; i++) {
    projects[i].toObject;
    observer.observe(projects[i])
}
}

// Observer options
const options = {
    root: null,
    rootMargin: '0px',
    threshold: 0.05
}

// Intersection observer callback and options
let observer = new IntersectionObserver( (entries) =>{
    entries.forEach(item => {
        if (item.isIntersecting) {
           item.target.classList.add('show');
        }
      });
}, options);

// Startup function
function init() {
    const title = document.getElementsByClassName('landing-page')[0].classList.add('show-lander');
    setTimeout(observeLoop, 800);
}

// Call startup function
init();

标签： javascriptcssintersection-observer