视口范围内的交叉口观察者

Question

这是我的第一个问题，很抱歉我的 baaad 英语（我是意大利人，英语很差）和 javascript 知识很少。 我正在尝试与 Intersection Observer 合作，以在部分文本进入视口时获取动画。 这是我的 javascript 代码：

启动 JAVASCRIPT 代码

const elementi = document.querySelectorAll('.oggetto');
var observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
    entry.target.style.opacity = "1";
      entry.target.classList.add('anima');
    } else {
      entry.target.classList.remove('anima');
    entry.target.style.opacity = "0";
    }
  });
});
elementi.forEach(avlll => {
  observer.observe(avlll);
});

这里是我的简单 css：

.oggetto {
  transition: 2s;
  transform: translate(0, 50px);
}
.oggetto.anima {
  transition: 2s;
  transform: translate(0, 0);
}

它似乎工作正常，但事实并非如此。 事实上，如果您尝试向下滚动直到观察到的 object 从 window 浏览器的顶部退出，在这个精确的滚动点上，（dom）object 会交替出现和失去 opacity.anima 样式。

几秒钟后（例如在我的 Firefox 浏览器中）此行为在没有.anima样式的.oggetto处停止，因此最终文本消失了。 但这不是真正的问题，真正的问题是为什么它进入循环就像 object 自己进出屏幕一样