Intersection Observer API 不适用于变换：translateX()

Question

I have the Intersection Observer API working on my page with a few transitions from an example I found.

See here working scale-in transition: https://jsfiddle.net/wm8f4Lks/

However, when I try to use the fade-from-left transition which transitions from translateX(-2000px) to translateX(0px) - nothing happens. The javascript does not even trigger the assignment of the class is-inViewport to the element which is confusing - I am not understanding how a css command can block a javascript command?

It is happening in the jsfiddle so I assume it is not just me, it's a thing, but I want to know how to get around this and apply this transition?

Answer 1

Your problem is actually that the IntersectionObserver also does work with transform .
The translate(-2000px, 0) moves makes your element 2000px on the left, its sizes is set to 100% (default), which corresponds to the size of the viewport - 16px (from the body's margins). If your viewport is smaller than 2000px, this means that your element is completely off screen. For instance if the viewport is 1024px, the element's width will be 1008px (1024 - 16). With the transform applied, its left coordinate will be -1992px (8 - 2000) and its right coordinate will be -984px (-1992 + 1008). This means that it's not inside the current viewport, but off by 984px, on the left.

If you had your viewport larger than 2000px, then it would have worked.

Note that you may want to revisit the value of the translation here, since using an hard-coded absolute value like that to affect an element that has a relative size is very often a bad idea.

Unfortunately, pseudo elements don't trigger ObservationObservers, so we will need an actual element to act as a trigger: We'll keep that trigger in the viewport and place right above the one we want to animate. This way the observer will kick happily, and our element will be animatable however we want.

 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>