Javascript：将Div置于视口中时对其进行动画处理

Question

在图片中，标题下方有4个圆圈，

当它们在视口中时，我无法弄清楚如何使其如图所示进行动画处理

Answer 1

您可以使用Intersection_Observer_API来检查元素何时在视口中并应用动画。

https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API

function handleIntersectionEntry(entry) {
if (entry.length > 0) {
  const item = entry[0];
  const ratio = Math.floor(item.intersectionRatio);
  if (ratio > 0) {
    // ITEM IN VIEWPORT
  } else if (ratio < 1) {
   // ITEM OUT OF VIEWPORT
  }
}


  const config = {
    root: null,
    threshold: [1.0],
    rootMargin: "0px"
  };

  this.Observer = new IntersectionObserver(
    handleIntersectionEntry,
    config
  );

  this.Observer.observe('YOUR DOM ELEMENT TO MONITOR');

支持所有浏览器的Polyfill： https : //github.com/w3c/IntersectionObserver/tree/master/polyfill