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" повторюється.');
}
});
| Порада: | Для налагодження коду, що використовує подію |
| Порада: | Подія |
| Порада: | Якщо ви хочете, щоб анімація змінювала свою поведінку в залежності від поточного циклу, використовуйте властивість |
Синтаксис
element.addEventListener('animationiteration', function(event) {
// Ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі користувач може взаємодіяти з кнопкою, щоб запускати та зупиняти анімацію. Кожного разу, коли анімація завершує один цикл, подія animationiteration спрацьовує, і на екрані оновлюється кількість циклів, а також змінюється текст на кнопці. Це дозволяє користувачам бачити в реальному часі, як працює подія animationiteration, і як вона може використовуватися для створення інтерактивних елементів на веб-сторінках.
У цьому прикладі лічильник iterationCount збільшується щоразу, коли подія animationiteration спрацьовує. Після п'яти циклів анімація автоматично зупиняється, демонструючи, як можна контролювати поведінку анімації в залежності від кількості повторень.
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 циклів.');
}
});Цей приклад демонструє, як можна змінювати колір елемента після кожного циклу анімації. Після кожного завершення циклу анімації колір змінюється на наступний у масиві кольорів, створюючи ефект динамічного змінення кольорів під час анімації.
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]}`);
});