DOM

：

：

Document：animationcancel イベント

　編集：2022.10.11 by T.A.

[Edge]。→、

実験的： これは実験的な機能です。本番で使用する前にブラウザー互換性一覧表をチェックしてください。

このイベントは、が予期せず中断されたときに発生します。言い換えれば、animationend イベントを送出せずに実行が停止するときはいつでもです。

これは animation-name が変更されてアニメーションが削除されたり、動いているノードが CSS を使用して非表示にされた場合などに起こることがあります。したがって、直接または原因として、その包含ノードのいずれかが隠されています。

バブリング あり
キャンセル可能 いいえ
インターフェイス AnimationEvent
イベント ハンドラー プロパティ onanimationcancel

このイベントの本来の対象は、トランジションが適用された Element です。このイベントを Document インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、HTMLElement：animationcancel イベントを参照してください。

例
スタイルシートでアニメーション

以下のCSSが組み込んであります： 


 
HTML：
 
すぐにスクリプトを実行させてください。
<DIV id=IdTest style="width:1em;
  animation:5s linear 5s TestKF;
">■</DIV>
<SPAN id=IdLog></SPAN>


 
JavaScript：
 
function Job(eve){ //animationcancel イベントの処理：
  D=eve;
  IdLog.innerHTML=IdLog.innerHTML+"●"; //表示。
}
document.onanimationcancel=Job; //イベントの割り当て。

IdTest.style.animationName="";


 
動きは止まるが、animationcancel イベントが発生しない。









テスト