HTMLElement: animationiteration event

animationiteration 事件将被触发 当CSS 动画的迭代结束且另一个迭代开始时。此事件不会与 animationend 事件同时发生t, 因此对于animation-iteration-count次数为1的动画不会发生。

例子

此代码使用 animationiteration 来跟踪动画已完成的迭代次数:

const animated = document.querySelector('.animated');

let iterationCount = 0;

animated.addEventListener('animationiteration', () => {
  iterationCount++;
  console.log(`Animation iteration count: ${iterationCount}`);
});

相同, 但使用 onanimationiteration 事件处理程序属性：

const animated = document.querySelector('.animated');

let iterationCount = 0;

animated.onanimationiteration = () => {
  iterationCount++;
  console.log(`Animation iteration count: ${iterationCount}`);
};

鲜活的范例

HTML

<div class="animation-example">
    <div class="container">
        <p class="animation">You chose a cold night to visit our planet.</p>
    </div>
    <button class="activate" type="button">Activate animation</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 started' `;
});

animation.addEventListener('animationiteration', () => {
  iterationCount++;
  animationEventLog.textContent = `${animationEventLog.textContent}'animation iterations: ${iterationCount}' `;
});

animation.addEventListener('animationend', () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'animation ended'`;
  animation.classList.remove('active');
  applyAnimation.textContent = "Activate animation";
});

animation.addEventListener('animationcancel', () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'animation canceled'`;
});

applyAnimation.addEventListener('click', () => {
  animation.classList.toggle('active');
  animationEventLog.textContent = '';
  iterationCount = 0;
  let active = animation.classList.contains('active');
  if (active) {
    applyAnimation.textContent = "Cancel animation";
  } else {
    applyAnimation.textContent = "Activate animation";
  }
});

结果

规范

浏览器兼容性

了解更多

• CSS Animations
• Using CSS Animations
• AnimationEvent
• Related events: animationstart, animationend, animationcancel
• This event on Document targets: animationiteration
• This event on Window targets: animationiteration