キーポイント

• JavaScriptは、イベントハンドラーを要素に追加してCSS3アニメーションを管理し、アニメーションを順番に再生するなど、アニメーションを細(xì)かく制御できるようにすることができます。キャプチャできるイベントには、「AnimationStart」、「AnimationItration」、および「AnimationEnd」の3つのタイプがあります。
これらのアニメーションイベントのクロスブラウザー互換性は、カスタム関數(shù)を使用してすべてのプレフィックスされた名前と未定の名前を呼び出すことで実現(xiàn)できます。これにより、イベントハンドラーをコード行を使用して割り當(dāng)てることができます。
• addEventListenerアニメーションリスナー関數(shù)に渡されたイベントオブジェクトは、アニメーション名とアニメーションの開始以來の経過時(shí)間を提供します。これを使用して、特定のアニメーションが終了したときに他のコードを?qū)g行し、特定の順序で別のCSS3アニメーションを適用するなど、他のコードを?qū)g行できます。
CSS3アニメーションはスムーズで簡(jiǎn)単に実裝できますが、JavaScriptとは異なり、フレームごとの制御はありません。幸いなことに、イベントハンドラーを任意の要素に適用して、アニメーション狀態(tài)を決定できます。これにより、さまざまなアニメーションを順番に再生するなど、細(xì)かい制御が可能になります。

このシンプルな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;
}

/* 動(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; }
}

クラスがID

の要素に適用されると、enableという名前のアニメーションが3回実行されます。各反復(fù)は1秒間続き、その間に要素がフェードアウトしてからフェードインします。 anim アニメーションが発生すると、flash 3種類のイベントがトリガーされます。

アニメーションが最初に開始されたとき、animationstart

イベントが起動(dòng)されます。

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

animationstart

animationiteration

イベントは、新しいアニメーションの各反復(fù)、つまり最初の反復(fù)を除く各反復(fù)の各反復(fù)の先頭に発生します。

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

animationiteration

animationend

アニメーションの終わりにイベントが発射されます。

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

animationendブラウザー互換性<

執(zhí)筆時(shí)點(diǎn)で、Firefox、Chrome、Safari、Opera、およびIE10は、CSS3アニメーションと関連するイベントハンドラーをサポートしています。さらに、Opera、IE10、およびWebKitブラウザはプレフィックスを使用しており、完全に防止するためにいくつかのケース変更を加えました...

W3C Standard Firefox webKitオペラIE10

animationstartanimationstart webkitAnimationStart oanimationstart MSAnimationStartanimationiteration animationiteration webkitAnimationIterationoanimationiteration MSAnimationIterationanimationendanimationendwebkitAnimationEnd oanimationend MSAnimationEnd

addEventListenerプレフィックスの問題を解決する最も簡(jiǎn)単な方法は、カスタム関數(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)てることができます：

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

イベントオブジェクト

上記のコードでは、アニメーションイベントが発生するたびに

関數(shù)が呼び出されます。イベントオブジェクトは、単一のパラメーターとして渡されます。標(biāo)準(zhǔn)のプロパティとメソッドに加えて、次のことも提供します。 AnimationListener

：css3アニメーション名（つまり
• ）animationName flash
：アニメーションの開始以來の時(shí)間（秒?yún)g位）。
• elapsedTime したがって、

アニメーションがいつ終了するかを検出できます。たとえば、

flash たとえば、

コードは、既存のクラスを削除したり、特定の順序で別のCSS3アニメーションを適用したりできます。

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

javascriptのCSS3アニメーションイベントデモンストレーションを表示

デモページにボタンが表示されます。クリックすると、「enable」クラスが切り替えられ、アニメーションが開始されます。アニメーションイベントがトリガーされると、ステータスがコンソールに表示されます。アニメーションが終了すると、ボタンを再度クリックできるように「有効」クラスが削除されます。

興味深いプロジェクトでアニメーションイベントキャプチャを使用する場(chǎng)合は、お知らせください。 flash

（この記事を読むのが好きなら、學(xué)習(xí)できるのが気に入るはずです。これはマスターから新しいスキルとスキルを?qū)Wぶ場(chǎng)所です?，F(xiàn)実の世界のCSS3）

（この記事のコメントは閉じられています。CSSについて質(zhì)問はありますか？フォーラムで尋ねてみませんか？）

CSS3アニメーションとJavaScriptイベントハンドラーについてのFAQ（FAQ） CSS3アニメーションとJavaScriptイベントハンドラーとは何ですか？

CSS3アニメーションは、JavaScriptやFlashを使用せずにHTML要素をアニメーション化できるCSS3（Cascading StyleSheets）の機(jī)能です。追加のリソースなしで、CSSコードでシンプルなアニメーションを直接作成する方法を提供します。一方、JavaScriptイベントハンドラーは、特定のイベントが発生したときにトリガーするJavaScriptの関數(shù)です。これらのイベントは、ユーザーがボタンをクリックしたり、ページの読み込みをしたり、アニメーションを終了したりするなど、あらゆるイベントにすることができます。 CSS3アニメーションとJavaScriptイベントハンドラーを使用して、動(dòng)的なインタラクティブなWebコンテンツを作成します。

CSS3アニメーションでJavaScriptイベントハンドラーを使用する方法は？

CSS3アニメーションを備えたJavaScriptイベントハンドラーを使用するには、アニメーション化するHTML要素にイベントリスナーを追加する必要があります。このイベントリスナーは、アニメーションの最後にJavaScript関數(shù)をトリガーします。基本的な例は次のとおりです

このコードでは、「AnimationEnd」は私たちが聴いているイベントであり、CSS3アニメーションが完了したときに発火します。

CSS3トランジションを備えたJavaScriptイベントハンドラーを使用できますか？

はい、CSS3アニメーションと同じように、CSS3トランジションを備えたJavaScriptイベントハンドラーを使用できます。聞く必要があるイベントは「TransitionEnd」です。このイベントは、CSSの移行が完了した後に解雇されます。

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

JavaScriptを使用してCSS3アニメーションの時(shí)間を制御する方法は？

JavaScriptを使用して、「アニメーション」プロパティを使用してCSS3アニメーションの時(shí)間を制御できます。このプロパティは、アニメーションの開始時(shí)の遅延を設(shè)定します。このプロパティを次のようにJavaScriptに設(shè)定できます：<

このコードでは、ページが2秒間ロードされた後にアニメーションが開始されます。

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

JavaScriptを使用してCSS3アニメーションを繰り返す方法は？

「アニメーションアイテーションカウント」プロパティを使用して、JavaScriptを使用してCSS3アニメーションを繰り返すことができます。このプロパティは、アニメーションを再生する回?cái)?shù)を指定します。このプロパティを次のようにJavaScriptに設(shè)定できます：<

このコードでは、アニメーションが無期限に繰り返されます。

JavaScriptを使用してCSS3アニメーションの速度を変更できますか？

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

はい、JavaScriptを使用してCSS3アニメーションの速度を変更できます。 「アニメーション期間」プロパティは、アニメーションがサイクルを完了するのにかかる時(shí)間の長(zhǎng)さを制御します。このプロパティを次のようにJavaScriptに設(shè)定できます：<

このコードでは、アニメーションは2秒間続きます。

JavaScriptを使用してCSS3アニメーションを一時(shí)停止して復(fù)元する方法は？

「アニメーションプレイステート」プロパティを使用してJavaScriptを使用してCSS3アニメーションを一時(shí)停止して復(fù)元できます。このプロパティは、アニメーションが実行されているか一時(shí)停止しているかを設(shè)定します。このプロパティを次のようにJavaScriptに設(shè)定できます：<

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

このコードでは、アニメーションが一時(shí)停止されます。

JavaScriptを使用してCSS3アニメーションの方向を変更できますか？

はい、JavaScriptを使用してCSS3アニメーションの方向を変更できます。 「アニメーション方向」プロパティは、交互のサイクル中にアニメーションを逆に再生する必要があるかどうかを定義します。このプロパティを次のようにJavaScriptに設(shè)定できます：<

このコードでは、アニメーションが後方に再生されます。

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

JavaScriptを使用してCSS3アニメーションの終わりを検出する方法は？

JavaScriptを使用して、「AnimationEnd」イベントにイベントリスナーを追加することで、CSS3アニメーションの終了を検出できます。このイベントは、CSS3アニメーションが完了した後に解雇されます。それを行う方法は次のとおりです

JavaScriptを使用してCSS3アニメーションのアニメーション - タイミング機(jī)能を変更できますか？

はい、JavaScriptを使用してCSS3アニメーションの「アニメーション - タイミング機(jī)能」を変更できます。このプロパティは、アニメーションの速度曲線を指定します。このプロパティを次のように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アニメーションイベントをキャプチャする方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。