From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/window/animationcancel_event/index.html | 92 ++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 files/ja/web/api/window/animationcancel_event/index.html (limited to 'files/ja/web/api/window/animationcancel_event') diff --git a/files/ja/web/api/window/animationcancel_event/index.html b/files/ja/web/api/window/animationcancel_event/index.html new file mode 100644 index 0000000000..f0a218fbe5 --- /dev/null +++ b/files/ja/web/api/window/animationcancel_event/index.html @@ -0,0 +1,92 @@ +--- +title: 'Window: animationcancel イベント' +slug: Web/API/Window/animationcancel_event +tags: + - API + - Animation + - CSS Animations + - CSS アニメーション + - Event + - Reference + - Window + - イベント +translation_of: Web/API/Window/animationcancel_event +--- +
{{APIRef}}{{SeeCompatTable}}
+ +

animationcancel イベントは、 CSS アニメーションが予期せず中断されたときに発生します。言い換えれば、 {{domxref("Window/animationend_event", "animationend")}} イベントを送出せずに実行が停止するときはいつでもです。これは {{cssxref("animation-name")}} が変更されてアニメーションが削除されたり、動いているノードが CSS を使用して非表示にされた場合などに起こることがあります。したがって、直接または原因として、その包含ノードのいずれかが隠されています。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{domxref("AnimationEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onanimationcancel","onanimationcancel")}}
+ +

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

+ +

例

+ +

このコードはリスナーに animationcancel イベントを追加します。

+ +
window.addEventListener('animationcancel', () => {
+  console.log('アニメーションが取り消されました');
+});
+ +

同様に、 {{domxref("GlobalEventHandlers/onanimationcancel", "onanimationcancel")}} プロパティを addEventListener() の代わりに使用するとこうなります。

+ +
document.onanimationcancel = () => {
+  console.log('アニメーションが取り消されました');
+};
+ +

このイベントのライブデモを参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Animations", "#eventdef-animationevent-animationcancel")}}{{Spec2("CSS3 Animations")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Window.animationcancel_event")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf