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

Question

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

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

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

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

先感谢您。

Answer 1

我也有同样的情况。我发现如果你不断移动/单击鼠标，观察者就会正常工作。

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

然后我在 @keyframes 中添加一些其他属性，它工作得很好！例如：

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