当 CSS 转换将元素带入视口时，Intersection Observer 无法正常工作

Question

我在没有特定选项的情况下初始化了一个 Intersection Observer，因此阈值等于 0.0，并且事件应该在被观察元素的第一个像素进入视口时触发。

这就是当我通过滚动触发观察者以及使用使用简单的 CSS 属性（如top定义的过渡触发它时会发生的情况。 但是当观察到的元素出现在视口中时，由于使用过渡动画的 CSS 变换，观察者在动画结束之前不会触发回调。 我需要在元素出现在视口内的那一刻触发它，因为它应该是.

你可以在这里看到一个例子： https : //jsfiddle.net/38v2dots/2/

我现实世界的问题是一个旋转木马库（不必要地）与 CSS 3D 转换一起工作。 但问题也发生在 2D 变换中。 不幸的是，我不得不使用这个库，因此无法避免 3D 变换。

先感谢您。

Answer 1

我有同样的情况。 而且我发现如果您不断移动/单击鼠标，Observer 会正常工作。

所以我认为它是维持观察者工作的绘画事件。

然后我在@keyframes 中添加了一些其他属性，它工作正常！ 如：

@keyframes sidetoside {
  0% {
    transform: translate3d(-400px, 0, 0);
  }
  50% {
    left: 0px;  // 👈🏻👈🏻👈🏻
  }
  100% {
    transform: translate3d(400px, 0, 0);
  }
}