この記事では、CSS アニメーションの後に JavaScript 関数を実行する手順を説明します。
CSSアニメーションが終了した後にJavaScriptを実行するにはどうすればよいですか?
JavaScript が提供する「 アニメーション開始 「＆」 アニメーション化する 」イベントを使用すると、アニメーションの開始または終了時に開発者が Javascript 関数を実行できるようになります。これにより、開発者はアニメーションの終了後に任意の操作を実行することが非常に便利になります。 「」を使用するための構文 アニメーション化する 」イベントの内容は以下の通りです。
{ HTML 要素 } 。 addEventListener ( 「アニメーション」 、関数名 ） ;
上記の構文では、「 アニメーション化する ” がイベント リスナーの最初の引数として指定され、その後にアニメーションが終了したときに実行される関数が続きます。 「 イベントリスナー 」 JavaScript では、特定のイベントが発生するたびに、指定された関数が起動されます。
上記で定義した構文を使用して、CSS アニメーションの後にユーザーが JavaScript 関数を実行する方法を理解しましょう。このデモでは、ボックスがアニメーション化されて下に移動し、「」で再び上に来ます。 四 」秒。アニメーションが完了すると、JavaScript 関数を使用してメッセージが表示されます。
< html >
< スタイル >
#myDIV {
幅 : 150ピクセル ;
身長 : 150ピクセル ;
位置 : 相対的 ;
背景 : ライトグリーン ;
}
@keyframesmoveBox {
0 % { 上 : 0ピクセル ; }
50 % { 上 : 200ピクセル ; 背景 : ピンク ; }
100 % { 上 : 0ピクセル ; 背景 : ライトグリーン ; }
}
スタイル >
< 体 >
< h1 > 実行後に JavaScript を実行する CSS アニメーション h1 >
< h3 > 下の四角をクリックしてアニメーションを開始します h3 >
< PID = 'のために' > p >
< ディビジョンID = 「myDIV」 クリック時 = 「myFunction()」 > ディビジョン >
< 脚本 >
定数 div1 = 書類。 getElementById ( 「myDIV」 ） ;
定数 のために = 書類。 getElementById ( 'のために' ） ;
関数 myFunction ( ） {
ディビジョン1。 スタイル 。 アニメーション = 「ムーブボックス6s」 ;
}
ディビジョン1。 addEventListener ( 「アニメーションスタート」 、start関数 ） ;
ディビジョン1。 addEventListener ( 「アニメーション」 、end関数 ） ;
関数開始関数 ( ） {
のために。 内部HTML = 「アニメ始まったよ…」 ;
}
関数の終了関数 ( ） {
のために。 内部HTML = 「アニメは終わってしまった！」 ;
のために。 スタイル 。 色 = '赤' ;
}
脚本 >
体 >
html >
上記のコードの説明は次のとおりです。
- の中に ' <スタイル> ” タグ、ID が” の要素 myDIV 」は CSS プロパティで提供されます。
- 次に、「 キーフレーム 「」という名前 ムーブボックス 』はアニメ化を目的として制作されています。 3 つの移行状態があります。最初の移行は「」からになります。 0% ' に ' 50% ”。そうすると、次の移行は「」からになります。 50% ' に ' 100% ”。
- 次に、body タグ内に、「 h1 「＆」 h3 ”という要素が生まれます。
- 「 ” ID を持つ要素” のために ' 創造された。
- 「 ディビジョン ” ID を持つ要素” myDIV ' 創造された。また、「」という名前の機能 myFunction() 』に提供されるのは、 クリック時 div要素の”属性。
- 次に、「」の内部 <スクリプト> ” タグを使用すると、2 つの定数が作成されます。これらの定数は、「」を使用して HTML 要素を指します。 .getElementByID() ' 方法。
- 「」という名前の関数 myFunction() ' 創造された。この機能は「」をアニメーション化します。 myDIV ” 要素を使用して” ムーブボックス 」キーフレーム。
- 次に、「」上で指定された関数を呼び出す 2 つのイベント リスナーが作成されます。 アニメーション開始 ”イベントと” アニメーション化する ' イベント。
- 次に、上記のイベントに対する 2 つの関数が定義されます。
出力：
以下の出力では、ユーザーがボックスをクリックするとアニメーションが開始されることがわかります。アニメーションのプロセスでは、ボックスが変化し、200 ピクセル下に移動し、元の場所に戻ります。動きの途中で色も緑からピンク、そして再び緑に変わります。次にメッセージ「 アニメは終了しました！ 」は、CSSアニメーション終了後に実行されるJavaScript関数を使用して表示されます。
CSS アニメーションの終了後に JavaScript 関数を実行する方法は以上です。
結論
CSS アニメーションの終了後に JavaScript 関数を実行するには、ユーザーはイベント リスナーを使用できます。そのためには、ユーザーは「」を提供する必要があります。 アニメーション化する 」 イベントを最初の引数として、関数をイベント リスナーの 2 番目の引数として指定します。指定された関数はアニメーションの終了後に実行されます。この記事では、CSS アニメーションの後に Javascript 関数を実行する手順を説明しました。