關(guān)鍵要點(diǎn)

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

CSS3 動畫流暢且易於實(shí)現(xiàn)，但與 JavaScript 不同，它沒有逐幀控制。幸運(yùn)的是，您可以將事件處理程序應(yīng)用於任何元素以確定動畫狀態(tài)。這允許精細(xì)控制，例如按順序播放不同的動畫。

考慮這個(gè)簡單的 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; }
}

當(dāng) enable 類應(yīng)用於 ID 為 anim 的元素時(shí)，名為 flash 的動畫將運(yùn)行三次。每次迭代持續(xù)一秒鐘，在此期間元素會淡出然後淡入。

動畫發(fā)生時(shí)會觸發(fā)三種類型的事件：

animationstart

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

animationstart 事件在動畫第一次啟動時(shí)觸發(fā)。

animationiteration

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

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

animationend

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

animationend 事件在動畫結(jié)束時(shí)觸發(fā)。

瀏覽器兼容性

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

W3C 標(biāo)準(zhǔn) Firefox webkit Opera IE10 animationstart animationstart webkitAnimationStart oanimationstart MSAnimationStart animationiteration animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration animationend animationend webkitAnimationEnd oanimationend MSAnimationEnd

解決前綴問題的最簡單方法是使用自定義函數(shù)為所有帶前綴和不帶前綴的名稱調(diào)用 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);
    }
}

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

#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; }
}

事件對象

在上面的代碼中，每當(dāng)發(fā)生動畫事件時(shí)，都會調(diào)用 AnimationListener 函數(shù)。一個(gè)事件對像作為單個(gè)參數(shù)傳遞。除了標(biāo)準(zhǔn)屬性和方法之外，它還提供：

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

因此，我們可以檢測 flash 動畫何時(shí)結(jié)束，例如：

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

例如，代碼可以移除現(xiàn)有類或按特定順序應(yīng)用另一個(gè) CSS3 動畫。

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

演示頁面顯示一個(gè)按鈕。單擊它時(shí)，將切換“enable”類，從而啟動 flash 動畫。當(dāng)動畫事件觸發(fā)時(shí)，狀態(tài)會顯示在控制臺中。動畫結(jié)束後，“enable”類將被移除，以便可以再次單擊按鈕。

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

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

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

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

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

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

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

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

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

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

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

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

如何使用 JavaScript 控制 CSS3 動畫的時(shí)間？

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

#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 動畫。此屬性指定應(yīng)播放動畫的次數(shù)。您可以像這樣在 JavaScript 中設(shè)置此屬性：

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

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

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

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

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

在此代碼中，動畫將持續(xù) 2 秒。

如何使用 JavaScript 暫停和恢復(fù) CSS3 動畫？

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

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

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

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

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

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 動畫的結(jié)束？

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

// 動畫偵聽器事件
PrefixedEvent(anim, "AnimationStart", AnimationListener);
PrefixedEvent(anim, "AnimationIteration", AnimationListener);
PrefixedEvent(anim, "AnimationEnd", AnimationListener);

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

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

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

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

以上是如何捕獲JavaScript中的CSS3動畫事件的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！