animationcancel
イベントは、 CSS アニメーションが予期せず中断されたときに発生します。言い換えれば、 animationend
イベントを送出せずに実行が停止するときはいつでもです。これは animation-name
が変更されてアニメーションが削除されたり、動いているノードが CSS を使用して非表示にされた場合などに起こることがあります。したがって、直接または原因として、その包含ノードのいずれかが隠されています。
バブリング | あり |
---|---|
キャンセル | 不可 |
インターフェイス | AnimationEvent |
イベントハンドラープロパティ | onanimationcancel |
このイベントの本来の対象は、トランジションが適用された Element
です。このイベントを Window
インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 HTMLElement: animationcancel イベントを参照してください。
例
このコードはリスナーに animationcancel
イベントを追加します。
window.addEventListener('animationcancel', () => {
console.log('アニメーションが取り消されました');
});
同様に、 onanimationcancel
プロパティを addEventListener()
の代わりに使用するとこうなります。
document.onanimationcancel = () => {
console.log('アニメーションが取り消されました');
};
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Animations | 草案 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
- CSS アニメーション
- CSS アニメーションの使用
AnimationEvent
- 関連イベント:
animationstart
,animationend
,animationiteration
Document
を対象としたこのイベント:animationcancel
HTMLElement
を対象としたこのイベント:animationcancel