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" повторюється.');
}
});
- Порада
-
Для налагодження коду, що використовує подію
автор: Bondanimationiteration, скористайтесяconsole.log()або іншими методами налагодження, щоб бачити, коли і як часто подія викликається. Це допоможе виявити помилки або неочікувану поведінку. - Порада
-
Подія
автор: Bondanimationiterationне підтримується у всіх старих браузерах, тому обов'язково перевіряйте підтримку браузера перед використанням цієї події в продуктивному коді. Можна використовувати бібліотеки, які забезпечують сумісність із різними браузерами. - Порада
-
Якщо ви хочете, щоб анімація змінювала свою поведінку в залежності від поточного циклу, використовуйте властивість
автор: Bondanimationiterationразом з іншими подіями, такими якanimationstartабоanimationend. Це дозволить вам створювати більш складні та інтерактивні анімації.
Синтаксис
element.addEventListener('animationiteration', function(event) {
// Ваш код тут
});Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 79 | 51 | 9 | 66 | 18 | 10* |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 79 | 79 | 51 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
Цей приклад демонструє, як можна змінювати колір елемента після кожного циклу анімації. Після кожного завершення циклу анімації колір змінюється на наступний у масиві кольорів, створюючи ефект динамічного змінення кольорів під час анімації.
HTML
<div class="color-box">перший елемент color-box</div>
<div class="color-box">другий елемент color-box</div>JS
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]}`);
});У цьому прикладі користувач може взаємодіяти з кнопкою, щоб запускати та зупиняти анімацію. Кожного разу, коли анімація завершує один цикл, подія animationiteration спрацьовує, і на екрані оновлюється кількість циклів, а також змінюється текст на кнопці. Це дозволяє користувачам бачити в реальному часі, як працює подія animationiteration, і як вона може використовуватися для створення інтерактивних елементів на веб-сторінках.
HTML
<header>
<h2 class="title">animationiteration (HTML Event)</h2>
<p class="description">Виконується кожного разу при завершенні одного циклу CSS-анімації.</p>
</header>
<main>
<div class="result">
<button id="animateButton" class="color-changing-button">Натисніть для старту</button>
<p id="iterationCount">Кількість циклів: 0</p>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
text-align: center;
}
.color-changing-button {
padding: 10px 20px;
font-size: 18px;
border: none;
cursor: pointer;
background-color: #007bff;
color: #fff;
animation: changeColor 1s infinite;
animation-play-state: paused; /* Анімація починається у паузі */
}
@keyframes changeColor {
0% {
background-color: #007bff;
}
50% {
background-color: #28a745;
}
100% {
background-color: #ff5733;
}
}
#iterationCount {
margin-top: 20px;
font-size: 16px;
color: #333;
}JS
document.addEventListener('DOMContentLoaded', function () {
const animateButton = document.getElementById('animateButton');
const iterationCountDisplay = document.getElementById('iterationCount');
let iterationCount = 0;
// Додаємо обробник події animationiteration до кнопки
animateButton.addEventListener('animationiteration', function (event) {
iterationCount++;
iterationCountDisplay.textContent = `Кількість циклів: ${iterationCount}`;
// Змінюємо текст кнопки кожного разу, коли анімація завершує цикл
if (iterationCount % 2 === 0) {
animateButton.textContent = 'Триває анімація...';
} else {
animateButton.textContent = 'Анімація в процесі...';
}
});
// Запуск і зупинка анімації при натисканні на кнопку
animateButton.addEventListener('click', function () {
if (animateButton.style.animationPlayState === 'paused') {
animateButton.style.animationPlayState = 'running';
animateButton.textContent = 'Анімація запущена!';
} else {
animateButton.style.animationPlayState = 'paused';
animateButton.textContent = 'Натисніть для старту';
iterationCount = 0; // Скидання лічильника циклів
iterationCountDisplay.textContent = `Кількість циклів: ${iterationCount}`;
}
});
});
//# sourceURL=pen.jsУ цьому прикладі лічильник iterationCount збільшується щоразу, коли подія animationiteration спрацьовує. Після п'яти циклів анімація автоматично зупиняється, демонструючи, як можна контролювати поведінку анімації в залежності від кількості повторень.
HTML
<div class="animated-box">перший елемент animated-box</div>
<div class="animated-box">другий елемент animated-box</div>JS
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 циклів.');
}
});Коментарі
Коментарів ще немає — будьте першим!