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

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

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

考慮這個(gè)簡單的 CSS3 動(dòng)畫：

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

/* 動(dòng)畫 */
@-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 的動(dòng)畫將運(yùn)行三次。每次迭代持續(xù)一秒鐘，在此期間元素會(huì)淡出然後淡入。

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

animationstart

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

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

animationiteration

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

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

animationend

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

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

瀏覽器兼容性

在撰寫本文時(shí)，F(xiàn)irefox、Chrome、Safari、Opera 和 IE10 支持 CSS3 動(dòng)畫和相關(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;
}

/* 動(dòng)畫 */
@-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; }
}

事件對(duì)象

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

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

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

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

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

查看 JavaScript 中的 CSS3 動(dòng)畫事件演示

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

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

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

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

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

什麼是 CSS3 動(dòng)畫和 JavaScript 事件處理程序？

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

如何將 JavaScript 事件處理程序與 CSS3 動(dòng)畫一起使用？

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

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

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

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

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

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

您可以使用“animation-delay”屬性使用 JavaScript 控制 CSS3 動(dòng)畫的時(shí)間。此屬性設(shè)置動(dòng)畫開始的延遲。您可以像這樣在 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;
}

/* 動(dòng)畫 */
@-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)畫將在頁面加載 2 秒後啟動(dòng)。

如何使用 JavaScript 重複 CSS3 動(dòng)畫？

您可以使用“animation-iteration-count”屬性使用 JavaScript 重複 CSS3 動(dòng)畫。此屬性指定應(yīng)播放動(dòng)畫的次數(shù)。您可以像這樣在 JavaScript 中設(shè)置此屬性：

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

在此代碼中，動(dòng)畫將無限期地重複。

我可以使用 JavaScript 更改 CSS3 動(dòng)畫的速度嗎？

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

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

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

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

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

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

在此代碼中，動(dòng)畫將被暫停。

我可以使用 JavaScript 更改 CSS3 動(dòng)畫的方向嗎？

是的，您可以使用 JavaScript 更改 CSS3 動(dòng)畫的方向。 “animation-direction”屬性定義動(dòng)畫是否應(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);
    }
}

在此代碼中，動(dòng)畫將反向播放。

如何使用 JavaScript 檢測(cè) CSS3 動(dòng)畫的結(jié)束？

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

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

我可以使用 JavaScript 更改 CSS3 動(dòng)畫的 animation-timing-function 嗎？

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

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

在此代碼中，動(dòng)畫將緩慢啟動(dòng)，然後加速。

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