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/htmlelement/animationend_event/index.html | 182 +++++++++++++++++++++ 1 file changed, 182 insertions(+) create mode 100644 files/ja/web/api/htmlelement/animationend_event/index.html (limited to 'files/ja/web/api/htmlelement/animationend_event/index.html') diff --git a/files/ja/web/api/htmlelement/animationend_event/index.html b/files/ja/web/api/htmlelement/animationend_event/index.html new file mode 100644 index 0000000000..6408d73e7f --- /dev/null +++ b/files/ja/web/api/htmlelement/animationend_event/index.html @@ -0,0 +1,182 @@ +--- +title: 'HTMLElement: animationend イベント' +slug: Web/API/HTMLElement/animationend_event +tags: + - Animation + - AnimationEvent + - CSS Animations + - CSS アニメーション + - CSS3 Animations + - Event + - Reference + - animationend + - イベント +translation_of: Web/API/HTMLElement/animationend_event +--- +
{{APIRef}}
+ +

animationend イベントは、 CSS アニメーションが完了したときに発生します。アニメーションが完了前に中止された場合、例えば要素が DOM から削除されたりアニメーションが要素から削除されたりした場合、 animationend イベントは発生しません。

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

+ +

この例では、アニメーションしている要素を取得し、animationend イベントを待ち受けします。

+ +
const animated = document.querySelector('.animated');
+
+animated.addEventListener('animationend', () => {
+  console.log('アニメーション終了');
+});
+ +

同様に、 onanimationend イベントハンドラープロパティを使用するとこうなります。

+ +
const animated = document.querySelector('.animated');
+
+animated.onanimationend = () => {
+  console.log('アニメーション終了');
+};
+ +

ライブデモ

+ +

HTML

+ +
<div class="animation-example">
+    <div class="container">
+        <p class="animation">あなたは私たちの惑星を訪れるために寒い夜を選びました。</p>
+    </div>
+    <button class="activate" type="button">アニメーションを有効にする</button>
+    <div class="event-log"></div>
+</div>
+
+ +

CSS

+ +
.container {
+  height: 3rem;
+}
+
+.event-log {
+  width: 25rem;
+  height: 2rem;
+  border: 1px solid black;
+  margin: .2rem;
+  padding: .2rem;
+}
+
+.animation.active {
+  animation-duration: 2s;
+  animation-name: slidein;
+  animation-iteration-count: 2;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +

JS

+ +
const animation = document.querySelector('p.animation');
+const animationEventLog = document.querySelector('.animation-example>.event-log');
+const applyAnimation = document.querySelector('.animation-example>button.activate');
+let iterationCount = 0;
+
+animation.addEventListener('animationstart', () => {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション開始' `;
+});
+
+animation.addEventListener('animationiteration', () => {
+  iterationCount++;
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション反復: ${iterationCount}' `;
+});
+
+animation.addEventListener('animationend', () => {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション終了'`;
+  animation.classList.remove('active');
+  applyAnimation.textContent = "アニメーションを有効にする";
+});
+
+animation.addEventListener('animationcancel', () => {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション取り消し'`;
+});
+
+applyAnimation.addEventListener('click', () => {
+  animation.classList.toggle('active');
+  animationEventLog.textContent = '';
+  iterationCount = 0;
+  let active = animation.classList.contains('active');
+  if (active) {
+    applyAnimation.textContent = "アニメーションを取り消す";
+  } else {
+    applyAnimation.textContent = "アニメーションを有効にする";
+  }
+});
+
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

+ +

仕様書

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

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLElement.animationend_event")}}

+ +

関連情報

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