如何僅當元素位於視窗中時才對元素進行動畫處理？

使用頁面滾動在視口中為元素添加動畫

問：如何才能僅當元素在滾動時在視口中可見時才在網頁上顯示動畫？

答：要實現此目的，您可以使用 IntersectionObserver API。

Intersection Observer API

Intersection Observer API 可讓您觀察元素與其父元素或元素之間的交集。視口。它使您能夠根據元素在視口中是否可見來觸發事件。

以下是使用API​​ 切換可用於觸發動畫的類別的範例：

const inViewport = (entries, observer) => {
  entries.forEach(entry => {
    entry.target.classList.toggle("is-inViewport", entry.isIntersecting);
  });
};

const Obs = new IntersectionObserver(inViewport);
const obsOptions = {};

// Attach observer to every [data-inviewport] element:
document.querySelectorAll('[data-inviewport]').forEach(el => {
  Obs.observe(el, obsOptions);
});

然後，您可以使用「is-inViewport」類別為元素新增CSS 轉換或動畫，以便在它們出現在視窗中時為其設定動畫。例如：

[data-inviewport] {
  width: 100px;
  height: 100px;
  background: #0bf;
  margin: 150vh 0;
}

/* inViewport */

[data-inviewport="scale-in"] {
  transition: 2s;
  transform: scale(0.1);
}
[data-inviewport="scale-in"].is-inViewport {
  transform: scale(1);
}

[data-inviewport="fade-rotate"] {
  transition: 2s;
  opacity: 0;
}
[data-inviewport="fade-rotate"].is-inViewport {
  transform: rotate(180deg);
  opacity: 1;
}

使用此程式碼，具有 [data-inviewport] 屬性的元素將具有 CSS 過渡。當他們進入視窗時，將添加 is-inViewport 類別來觸發動畫。

以上是如何僅當元素位於視窗中時才對元素進行動畫處理？的詳細內容。更多資訊請關注PHP中文網其他相關文章！