JS властивість Event.animationiteration

Загальний опис

animationiteration — це подія, яка виникає у веб-браузері кожного разу, коли CSS-анімація завершує один повний цикл повторення і починає наступний. Ця подія є частиною стандарту CSS Animations і дозволяє JavaScript реагувати на завершення кожного окремого циклу анімації. Подія animationiteration може бути використана для створення складних інтерактивних ефектів на веб-сторінках, які змінюються в залежності від того, скільки циклів анімації було виконано.

Для використання події animationiteration у JavaScript, необхідно додати обробник подій до елемента, який має CSS-анімацію. Це можна зробити за допомогою методу addEventListener(), який дозволяє виконувати певну функцію кожного разу, коли анімація досягає кінця свого циклу. Наприклад:

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

element.addEventListener('animationiteration', function(event) {
  console.log('Цикл анімації завершено, починається новий цикл.');
});

У цьому прикладі, коли анімація на елементі .animated-element завершує один цикл, у консолі браузера з'являється повідомлення.

Подія animationiteration може бути особливо корисною, коли ви хочете виконувати дії в певний момент під час безперервної анімації. Наприклад, можна змінювати текст, кольори або інші властивості кожного разу, коли анімація повертається до початку. Це може бути корисним для створення інтерактивних ігор або візуалізацій, де поведінка змінюється в залежності від кількості повторень анімації.

Об'єкт події, який передається в обробник події animationiteration, містить інформацію про анімацію, яка викликала подію. Зокрема, властивість animationName містить ім'я анімації, а властивість elapsedTime вказує час, що пройшов від початку анімації, до моменту виклику події. Це дозволяє розробникам створювати більш складні логічні умови в коді:

element.addEventListener('animationiteration', function(event) {
  if (event.animationName === 'bounce') {
    console.log('Анімація "bounce" повторюється.');
  }
});

правити

Порада

Для налагодження коду, що використовує подію animationiteration, скористайтеся console.log() або іншими методами налагодження, щоб бачити, коли і як часто подія викликається. Це допоможе виявити помилки або неочікувану поведінку.

автор: Bond правити

Порада

Подія animationiteration не підтримується у всіх старих браузерах, тому обов'язково перевіряйте підтримку браузера перед використанням цієї події в продуктивному коді. Можна використовувати бібліотеки, які забезпечують сумісність із різними браузерами.

автор: Bond правити

Порада

Якщо ви хочете, щоб анімація змінювала свою поведінку в залежності від поточного циклу, використовуйте властивість animationiteration разом з іншими подіями, такими як animationstart або animationend. Це дозволить вам створювати більш складні та інтерактивні анімації.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('animationiteration', function(event) {
  // Ваш код тут
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	79	51	9	66	18	10*

Підтримка: мобільні переглядачі

Переглядач
	79	79	51	9

Приклади

+ запропонувати свій приклад у пісочниці

<div class="color-box">перший елемент color-box</div>
<div class="color-box">другий елемент color-box</div>

const colorBox = document.querySelector('.color-box');
const colors = ['red', 'green', 'blue', 'orange'];
let colorIndex = 0;

colorBox.addEventListener('animationiteration', function(event) {
  colorIndex = (colorIndex + 1) % colors.length;
  colorBox.style.backgroundColor = colors[colorIndex];
  console.log(`Колір змінено на: ${colors[colorIndex]}`);
});

<div class="animated-box">перший елемент animated-box</div>
<div class="animated-box">другий елемент animated-box</div>

const animatedBox = document.querySelector('.animated-box');
let iterationCount = 0;

animatedBox.addEventListener('animationiteration', function(event) {
  iterationCount++;
  console.log(`Анімація завершила ${iterationCount} циклів.`);
  if (iterationCount === 5) {
    animatedBox.style.animationPlayState = 'paused'; // Зупиняє анімацію після 5 циклів
    console.log('Анімація зупинена після 5 циклів.');
  }
});