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

animationiteration イベントは、 CSS アニメーションの反復が1回分終了し、次の回が始まったときに発生します。このイベントは {{domxref("HTMLElement/animationend_event", "animationend")}} イベントと同時には発生せず、従って animation-iteration-count が1のアニメーションでは発生しません。

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

例

+ +

このコードは animationiteration を使用して、アニメーションの反復が終了した回数を追跡します。

+ +
const animated = document.querySelector('.animated');
+
+let iterationCount = 0;
+
+animated.addEventListener('animationiteration', () => {
+  iterationCount++;
+  console.log(`アニメーション反復回数: ${iterationCount}`);
+});
+ +

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

+ +
const animated = document.querySelector('.animated');
+
+let iterationCount = 0;
+
+animated.onanimationiteration = () => {
+  iterationCount++;
+  console.log(`アニメーション反復回数: ${iterationCount}`);
+};
+ +

ライブデモ

+ +

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: 0.2rem;
+  padding: 0.2rem;
+}
+
+.animation.active {
+  animation-duration: 2s;
+  animation-name: slidein;
+  animation-iteration-count: 2;
+}
+
+@keyframes slidein {
+  from {
+    transform: translateX(100%) scaleX(3);
+  }
+  to {
+    transform: translateX(0) scaleX(1);
+  }
+}
+
+ +

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-animationiteration")}}{{Spec2("CSS3 Animations")}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

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