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