如何捕獲JavaScript中的CSS3動畫事件

關鍵要點

• 通過為元素添加事件處理程序，JavaScript 可以管理 CSS3 動畫，從而實現對動畫的精細控制，例如按順序播放動畫。可以捕獲三種類型的事件：“animationstart”、“animationiteration”和“animationend”。
• 通過使用自定義函數為所有帶前綴和不帶前綴的名稱調用 addEventListener，可以實現這些動畫事件的跨瀏覽器兼容性。這允許使用一行代碼分配事件處理程序。
• 傳遞給動畫偵聽器函數的事件對象提供了動畫名稱和自動畫開始以來的經過時間。這可以用來檢測特定動畫何時結束並執行其他代碼，例如按特定順序應用另一個 CSS3 動畫。

CSS3 動畫流暢且易於實現，但與 JavaScript 不同，它沒有逐幀控制。幸運的是，您可以將事件處理程序應用於任何元素以確定動畫狀態。這允許精細控制，例如按順序播放不同的動畫。

考慮這個簡單的 CSS3 動畫：

#anim.enable {
  -webkit-animation: flash 1s ease 3;
  -moz-animation: flash 1s ease 3;
  -ms-animation: flash 1s ease 3;
  -o-animation: flash 1s ease 3;
  animation: flash 1s ease 3;
}

/* 动画 */
@-webkit-keyframes flash {
  50% { opacity: 0; }
}

@-moz-keyframes flash {
  50% { opacity: 0; }
}

@-ms-keyframes flash {
  50% { opacity: 0; }
}

@-o-keyframes flash {
  50% { opacity: 0; }
}

@keyframes flash {
  50% { opacity: 0; }
}

當 enable 類應用於 ID 為 anim 的元素時，名為 flash 的動畫將運行三次。每次迭代持續一秒鐘，在此期間元素會淡出然後淡入。

動畫發生時會觸發三種類型的事件：

animationstart

var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);

animationstart 事件在動畫第一次啟動時觸發。

animationiteration

anim.addEventListener("animationiteration", AnimationListener, false);

animationiteration 事件在每次新的動畫迭代開始時觸發，即除第一次迭代之外的每次迭代。

animationend

anim.addEventListener("animationend", AnimationListener, false);

animationend 事件在動畫結束時觸發。

瀏覽器兼容性

在撰寫本文時，Firefox、Chrome、Safari、Opera 和 IE10 支持 CSS3 動畫和相關的事件處理程序。此外，Opera、IE10 和 webkit 瀏覽器使用前綴，並為了確保萬無一失而進行了一些大小寫更改……

W3C 標準 Firefox webkit Opera IE10 animationstart animationstart webkitAnimationStart oanimationstart MSAnimationStart animationiteration animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration animationend animationend webkitAnimationEnd oanimationend MSAnimationEnd

解決前綴問題的最簡單方法是使用自定義函數為所有帶前綴和不帶前綴的名稱調用 addEventListener：

var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
    for (var p = 0; p < pfx.length; p++) {
        if (!pfx[p]) type = type.toLowerCase();
        element.addEventListener(pfx[p] + type, callback, false);
    }
}

現在可以使用一行代碼分配跨瀏覽器事件處理程序：

#anim.enable {
  -webkit-animation: flash 1s ease 3;
  -moz-animation: flash 1s ease 3;
  -ms-animation: flash 1s ease 3;
  -o-animation: flash 1s ease 3;
  animation: flash 1s ease 3;
}

/* 动画 */
@-webkit-keyframes flash {
  50% { opacity: 0; }
}

@-moz-keyframes flash {
  50% { opacity: 0; }
}

@-ms-keyframes flash {
  50% { opacity: 0; }
}

@-o-keyframes flash {
  50% { opacity: 0; }
}

@keyframes flash {
  50% { opacity: 0; }
}

事件對象

在上面的代碼中，每當發生動畫事件時，都會調用 AnimationListener 函數。一個事件對像作為單個參數傳遞。除了標準屬性和方法之外，它還提供：

• animationName：CSS3 動畫名稱（即 flash）
• elapsedTime：自動畫開始以來的時間（以秒為單位）。

因此，我們可以檢測 flash 動畫何時結束，例如：

var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);

例如，代碼可以移除現有類或按特定順序應用另一個 CSS3 動畫。

查看 JavaScript 中的 CSS3 動畫事件演示

演示頁面顯示一個按鈕。單擊它時，將切換“enable”類，從而啟動 flash 動畫。當動畫事件觸發時，狀態會顯示在控制台中。動畫結束後，“enable”類將被移除，以便可以再次單擊按鈕。

如果您在任何有趣的項目中使用動畫事件捕獲，請告訴我。

(如果您喜歡閱讀這篇文章，您會喜歡Learnable；這是從大師那裡學習新技能和技巧的地方。會員可以立即訪問所有SitePoint 的電子書和交互式在線課程，例如《面向現實世界的HTML5 和CSS3》)

(本文的評論已關閉。關於 CSS 有問題嗎？為什麼不在我們的論壇上提問呢？)

關於 CSS3 動畫和 JavaScript 事件處理程序的常見問題解答 (FAQ)

什麼是 CSS3 動畫和 JavaScript 事件處理程序？

CSS3 動畫是 CSS3（層疊樣式表）的一項功能，允許您在不使用 JavaScript 或 Flash 的情況下為 HTML 元素設置動畫。它提供了一種直接在 CSS 代碼中創建簡單動畫的方法，無需任何其他資源。另一方面，JavaScript 事件處理程序是在 JavaScript 中的函數，當發生特定事件時會觸發這些函數。這些事件可以是用戶單擊按鈕、頁面加載或動畫結束等任何事件。結合使用 CSS3 動畫和 JavaScript 事件處理程序可以創建動態的交互式 Web 內容。

如何將 JavaScript 事件處理程序與 CSS3 動畫一起使用？

要將 JavaScript 事件處理程序與 CSS3 動畫一起使用，您需要向要設置動畫的 HTML 元素添加事件偵聽器。此事件偵聽器將在動畫結束時觸發 JavaScript 函數。這是一個基本示例：

anim.addEventListener("animationiteration", AnimationListener, false);

在此代碼中，“animationend”是我們正在偵聽的事件，它在 CSS3 動畫完成時觸發。

我可以將 JavaScript 事件處理程序與 CSS3 過渡一起使用嗎？

是的，您可以像使用 CSS3 動畫一樣，將 JavaScript 事件處理程序與 CSS3 過渡一起使用。您需要偵聽的事件是“transitionend”。此事件在 CSS 過渡完成後觸發。

如何使用 JavaScript 控制 CSS3 動畫的時間？

您可以使用“animation-delay”屬性使用 JavaScript 控制 CSS3 動畫的時間。此屬性設置動畫開始的延遲。您可以像這樣在 JavaScript 中設置此屬性：

#anim.enable {
  -webkit-animation: flash 1s ease 3;
  -moz-animation: flash 1s ease 3;
  -ms-animation: flash 1s ease 3;
  -o-animation: flash 1s ease 3;
  animation: flash 1s ease 3;
}

/* 动画 */
@-webkit-keyframes flash {
  50% { opacity: 0; }
}

@-moz-keyframes flash {
  50% { opacity: 0; }
}

@-ms-keyframes flash {
  50% { opacity: 0; }
}

@-o-keyframes flash {
  50% { opacity: 0; }
}

@keyframes flash {
  50% { opacity: 0; }
}

在此代碼中，動畫將在頁面加載 2 秒後啟動。

如何使用 JavaScript 重複 CSS3 動畫？

您可以使用“animation-iteration-count”屬性使用 JavaScript 重複 CSS3 動畫。此屬性指定應播放動畫的次數。您可以像這樣在 JavaScript 中設置此屬性：

var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);

在此代碼中，動畫將無限期地重複。

我可以使用 JavaScript 更改 CSS3 動畫的速度嗎？

是的，您可以使用 JavaScript 更改 CSS3 動畫的速度。 “animation-duration”屬性控制動畫完成一個週期所需的時間長度。您可以像這樣在 JavaScript 中設置此屬性：

anim.addEventListener("animationiteration", AnimationListener, false);

在此代碼中，動畫將持續 2 秒。

如何使用 JavaScript 暫停和恢復 CSS3 動畫？

您可以使用“animation-play-state”屬性使用 JavaScript 暫停和恢復 CSS3 動畫。此屬性設置動畫是正在運行還是已暫停。您可以像這樣在 JavaScript 中設置此屬性：

anim.addEventListener("animationend", AnimationListener, false);

在此代碼中，動畫將被暫停。

我可以使用 JavaScript 更改 CSS3 動畫的方向嗎？

是的，您可以使用 JavaScript 更改 CSS3 動畫的方向。 “animation-direction”屬性定義動畫是否應在交替週期中反向播放。您可以像這樣在 JavaScript 中設置此屬性：

var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
    for (var p = 0; p < pfx.length; p++) {
        if (!pfx[p]) type = type.toLowerCase();
        element.addEventListener(pfx[p] + type, callback, false);
    }
}

在此代碼中，動畫將反向播放。

如何使用 JavaScript 檢測 CSS3 動畫的結束？

您可以通過為“animationend”事件添加事件偵聽器來使用 JavaScript 檢測 CSS3 動畫的結束。此事件在 CSS3 動畫完成後觸發。以下是如何操作：

// 动画侦听器事件
PrefixedEvent(anim, "AnimationStart", AnimationListener);
PrefixedEvent(anim, "AnimationIteration", AnimationListener);
PrefixedEvent(anim, "AnimationEnd", AnimationListener);

我可以使用 JavaScript 更改 CSS3 動畫的 animation-timing-function 嗎？

是的，您可以使用 JavaScript 更改 CSS3 動畫的“animation-timing-function”。此屬性指定動畫的速度曲線。您可以像這樣在 JavaScript 中設置此屬性：

if (e.animationName == "flash" &&
    e.type.toLowerCase().indexOf("animationend") >= 0) {
    ...
}

在此代碼中，動畫將緩慢啟動，然後加速。

以上是如何捕獲JavaScript中的CSS3動畫事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！