当 CSS 变换将元素带入视口时，交集观察器无法正常工作

Question

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

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

您可以在此处看到一个示例：https://jsfiddle.net/38v2dots/2/

我在现实世界中遇到的问题是一个旋转库，它(不必要地(使用CSS 3D转换。但问题也发生在2D变换中。不幸的是，我被迫使用这个库，所以避免3D转换不是一个选项。

提前谢谢。

Answer 1

我也有同样的情况。我发现，如果你不断移动/点击鼠标，观察者会很好地工作。

所以我认为是油漆事件维持了《观察家报》的运作。

然后我在@keyframe中添加了一个其他的属性，它很好！例如：

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