交叉点观察者API无法使用变换:translateX()

Question

我让Intersection Observer API在我的页面上工作，并从我找到的一个示例中进行了一些转换。

请参阅此处工作scale-in转换：https://jsfiddle.net/wm8f4Lks/

然而，当我尝试使用从translateX(-2000px)转换到translateX(0px)的fade-from-left转换时，什么都没有发生。javascript甚至没有触发类is-inViewport对元素的赋值，这很令人困惑——我不明白css命令如何阻止javascript命令？

这是在jsfiddle中发生的，所以我认为这不仅仅是我自己，这是一件事，但我想知道如何绕过这一点并应用这种转变？

Answer 1

您的问题实际上是IntersectionObserver也可以使用transform
translate(-2000px, 0)移动会使元素位于左侧2000px，其大小设置为100%(默认值(，对应于视口的大小-16px(从主体的边距开始(。如果您的视口小于2000px，这意味着您的元素完全脱离屏幕。例如，如果视口为1024px，则元素的宽度将为1008px(1024-16(。应用变换后，其左坐标将为-1992px(8-2000(，右坐标将为-984px(-1992+1008(。这意味着它不在当前视口内，而是在左侧关闭984px。

如果你的视口大于2000px，那么它就会起作用。

请注意，您可能希望在此处重新查看转换的值，因为使用这样的硬编码绝对值来影响具有相对大小的元素通常是个坏主意。

不幸的是，伪元素不会触发ObservationObserver，所以我们需要一个实际的元素来充当触发器：我们将把触发器放在视口中，并放在我们想要设置动画的元素的正上方。通过这种方式，观察者将愉快地踢球，我们的元素将按照我们的意愿进行动画化。

const inViewport = (entries, observer) => {
entries.forEach(entry => {
entry.target.nextElementSibling.classList.toggle("is-inViewport", entry.isIntersecting);
});
};
const Obs = new IntersectionObserver(inViewport);
const obsOptions = {}; //See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options
// Attach observer to every [data-inviewport] element:
const ELs_inViewport = document.querySelectorAll('.animate-trigger');
ELs_inViewport.forEach(EL => {
Obs.observe(EL, obsOptions);
});

.animate.scale-in {
transition: 2s;
transform: scale(0.1);
}
.animate.scale-in.is-inViewport {
transform: scale(1);
}
.animate.fade-rotate {
transition: 2s;
opacity: 0;
}
.animate.fade-rotate.is-inViewport {
transform: rotate(180deg);
opacity: 1;
}
.animate.fade-from-left {
transition: 2s;
transform: translateX(-150%);   /* Better not rely on hard-coded values */
}
.animate.fade-from-left.is-inViewport {
transform: translateX(0px);
opacity: 1;
width: 100%;
}

<div style="height: 200vh;"></div>
<div class="animate-trigger" aria-hidden="true"></div> <!-- a new element -->
<h2 class="animate fade-from-left">Heading</h2>