如何使用純 JavaScript 觸發 CSS 動畫？

在 JavaScript 觸發 CSS 動畫

在 Web 開發中，CSS 動畫為網頁提供視覺上的動態效果。然而，使用 JavaScript 觸發這些動畫可能是常見的挑戰。對於不喜歡使用 jQuery 的人，本指南提供了一種純粹透過 JavaScript 觸發 CSS 動畫的解決方案。

一個有效的方法是利用類別操作。透過向 HTML 元素新增或刪除類，您可以觸發特定的 CSS 動畫。在 JavaScript 中，這可以透過 HTMLElement 物件的 className 屬性來實現。

為了進行演示，請考慮以下範例：

function start() {
  document.getElementById('logo').classList.add('animate');
}

在此腳本中，當按一下標誌元素時。它將 'animate' 類別添加到元素。

要定位CSS 動畫，請為'animate' 類別建立對應的CSS 規則：

.animate {
  animation: my-animation 2s forwards;
}

在此CSS 規則中， “my-animation”動畫將應用於任何具有“ animate”類別的元素。

另一種方法是透過 HTMLElement 的 style 屬性 目的。這允許直接操作元素的內聯樣式。要使用此方法觸發動畫：

document.getElementById('logo').style.animation = 'my-animation 2s forwards';

和以前一樣，在 CSS 中定義「my-animation」動畫來指定動畫行為。

最後，對於涉及滾動的複雜動畫，您可以使用滾動事件監聽器：

window.addEventListener('scroll', () => {
  if (window.scrollY >= 100) {
    document.getElementById('logo').classList.add('animate');
  }
});

在此範例中，當使用者向下捲動超過 100 時動畫開始像素。請注意，此方法要求您使用在捲動位置觸發的關鍵影格規則來指定 CSS 動畫。

利用這些技術，您現在可以使用純 JavaScript 動態觸發 CSS 動畫，從而解鎖了創建動畫的廣泛可能性具有視覺吸引力的 Web 應用程式。

以上是如何使用純 JavaScript 觸發 CSS 動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！