JS об'єкт Animation
Загальний опис
Animation Events – це події, що активуються під час виконання CSS-анімацій. Вони включають такі події, як animationstart (початок анімації), animationiteration (кожна нова ітерація анімації) та animationend (завершення анімації). З їх допомогою JavaScript може реагувати на зміни стану анімації елементів у DOM, створюючи інтерактивні та динамічні ефекти.
Щоб використати Animation Events, спочатку потрібно додати CSS-анімацію до елемента. Наприклад, якщо у CSS створена анімація для елемента з ключовими кадрами, JavaScript може реагувати на етапи цієї анімації, використовуючи події, описані нижче.
Для відстеження початку анімації застосовується animationstart:
element.addEventListener('animationstart', (event) => {
console.log('Анімація почалась для елемента:', event.target);
});
Цей код виконується, коли анімація стартує, дозволяючи, наприклад, змінювати або завантажувати певні ресурси на початку анімації.
Подія animationiteration відслідковує кожну нову ітерацію (повторення) анімації:
element.addEventListener('animationiteration', (event) => {
console.log('Ітерація анімації для елемента:', event.target);
});
Це дозволяє виконувати код кожного разу, коли анімація починається заново, що корисно для циклічних анімацій.
Подія animationend спрацьовує, коли анімація завершується:
element.addEventListener('animationend', (event) => {
console.log('Анімація завершилась для елемента:', event.target);
});
animationend можна використовувати для повернення елемента у вихідний стан або очищення ресурсів після завершення анімації. Під час роботи з Animation Events варто враховувати об’єкт event, який містить властивості, такі як elapsedTime (час з моменту початку анімації) і animationName (назва анімації). Ці властивості корисні для контролю анімації, коли необхідно реагувати на певні ефекти, що виникають під час роботи анімації.
| Порада: |
|
| Порада: | Якщо потрібна анімація на кожній ітерації циклу, використовуйте |
| Порада: | Щоб зупиняти анімацію умовно, наприклад, при певній кількості ітерацій, можна додати лічильник, який збільшується на |
Синтаксис
element.addEventListener('animationstart', function(event) { /* Код для початку анімації */ });
element.addEventListener('animationiteration', function(event) { /* Код для повторення анімації */ });
element.addEventListener('animationend', function(event) { /* Код для завершення анімації */ });Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
43 |
5 |
9 |
30 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
43 |
43 |
5 |
9 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі кнопка запускає анімацію елементу animatedBox, і кожна з подій animationstart, animationiteration, та animationend записує інформацію про відповідні етапи у "Журнал подій".
Цей код перезапускає анімацію кожного разу, коли вона завершується, поки не буде виконано п'ять ітерацій. Це корисно для обмежених за тривалістю або кількістю повторень анімацій.
let counter = 0;
element.addEventListener('animationend', (event) => {
if (counter < 5) {
event.target.style.animation = 'none';
setTimeout(() => event.target.style.animation = '', 0); // Перезапуск анімації
counter++;
}
});У цьому прикладі після першої ітерації анімації додається новий клас до елемента. Це дозволяє створювати ефекти, що розширюються із кожним повторенням анімації, не змінюючи початковий вигляд елемента.
element.addEventListener('animationiteration', (event) => {
if (event.elapsedTime > 2) {
event.target.classList.add('highlight'); // Додає клас після першої ітерації
}
});Методи
Властивості
animationName- Властивість об'єкта події анімації, що повертає назву CSS-анімації, яка викликала подію. Це корисно для відстеження конкретних анімацій, коли до елемента застосовано декілька анімацій.
elapsedTime- Властивість, що показує час (у секундах), який минув з початку виконання анімації до моменту виникнення події. Допомагає контролювати тривалість та етапи анімації в реальному часі.
pseudoElement- Властивість, яка вказує на псевдоелемент, що викликав анімаційну подію (наприклад, `::before` чи `::after`). Якщо подія стосується самого елемента, повертає порожній рядок.