如何在滾動時使用 JavaScript 觸發 CSS 動畫？

在 JavaScript 觸發 CSS 動畫

在沒有 jQuery 的情況下，透過 JavaScript 觸發 CSS 動畫是可行的選擇。本指南提供了一種簡潔的方法來在使用者滾動頁面時實現此目的。

使用類別操作觸發 CSS 動畫

觸發 CSS 動畫的最簡單方法是修改類別的存在，允許其中定義的樣式生效。要使用純 JavaScript 完成此操作：

function addClass(element, className) {
  element.classList.add(className);
}

function removeClass(element, className) {
  element.classList.remove(className);
}

在您提供的範例中，您已經定義了動畫的 CSS 類別：「anim」和「anim2」。您可以透過將這些類別新增至對應的元素來啟動動畫：

function start() {
  addClass(document.getElementById('logo'), 'anim');
  addClass(document.getElementById('earthlogo'), 'anim2');
}

在頁面捲動時觸發動畫

最後，在頁面捲動時啟動動畫滾動後，您可以使用“window.addEventListener”函數：

window.addEventListener('scroll', start);

這將調用您的每當頁面滾動時，“start”函數就會觸發CSS 動畫。

附加說明

使用關鍵影格在 CSS 中定義的動畫可以透過新增或刪除類別來類似地觸發。但是，必須確保相關元素具有定義的過渡屬性以使動畫生效。

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