JS властивість Event.animationend
Загальний опис
animationend — це подія, яка виникає у веб-браузері, коли CSS-анімація завершила своє виконання. Ця подія є частиною веб-стандарту для обробки анімацій і дозволяє JavaScript-коду реагувати на завершення анімаційних ефектів на веб-сторінці. Подія animationend може бути використана для виконання додаткових дій, як-от зміна стилів, відправлення аналітики або ініціалізація наступних анімацій.
Щоб використовувати подію animationend в JavaScript, потрібно додати обробник подій до елемента, на якому виконується анімація. Це можна зробити за допомогою методу addEventListener(), який дозволяє визначити функцію, що виконується, коли анімація завершується. Наприклад:
const element = document.querySelector('.animated-element');
element.addEventListener('animationend', function(event) {
console.log('Анімація завершилася на елементі:', event.target);
});
У цьому прикладі, коли анімація на елементі з класом .animated-element завершиться, в консолі браузера з'явиться повідомлення із зазначенням, на якому елементі це сталося.
Подія animationend може бути корисною в різних ситуаціях, наприклад, коли потрібно очистити DOM після анімації видалення елемента, або коли необхідно запускати наступні анімації в певній послідовності. Подія надає інформацію про властивості анімації, що завершилася, такі як її назва (animationName), тривалість (elapsedTime), та ім'я властивості CSS, яка була анімована.
Щоб обробляти різні анімації на одному елементі, можна використовувати об'єкт події event, який передається до обробника події. Цей об'єкт містить властивість animationName, що дозволяє визначити, яка саме анімація завершилася, і в залежності від цього виконати відповідні дії:
element.addEventListener('animationend', function(event) {
if (event.animationName === 'fade-out') {
event.target.style.display = 'none';
}
});
У цьому прикладі, якщо анімація, що завершилася, має назву fade-out, елемент буде приховано.
| Порада: | Подія |
| Порада: | Для підвищення продуктивності додайте і видаляйте обробники подій, коли вони більше не потрібні. Це особливо важливо для сторінок з великою кількістю анімацій, щоб уникнути витоків пам'яті та зниження продуктивності. |
| Порада: | Якщо у вас є анімація, яка повторюється (наприклад, з |
Синтаксис
element.addEventListener('animationend', function(event) {
// Ваш код тут
});
Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі кнопка на сторінці дозволяє користувачу запускати анімацію на квадраті. Коли анімація закінчується, подія animationend спрацьовує, змінюючи колір квадрата та показуючи повідомлення. Це дозволяє користувачам наочно побачити результат роботи з подією animationend і зрозуміти, як можна використовувати цю подію для створення інтерактивних веб-сторінок.
У цьому прикладі після завершення анімації slide-in на елементі .box змінюється стиль бордера. Це може бути корисно для візуального зворотного зв'язку користувачу після виконання анімації.
const box = document.querySelector('.box');
box.addEventListener('animationend', function(event) {
if (event.animationName === 'slide-in') {
event.target.style.border = '2px solid green';
console.log('Анімація завершилася, бордер встановлено.');
}
});Цей приклад демонструє ланцюгове виконання анімацій. Після завершення першої анімації fade-out на першому елементі, запускається друга анімація на іншому елементі. Це може бути використано для послідовного виконання анімаційних ефектів у складних інтерфейсах користувача.
const firstElement = document.querySelector('.first');
const secondElement = document.querySelector('.second');
firstElement.addEventListener('animationend', function(event) {
if (event.animationName === 'fade-out') {
secondElement.classList.add('start-next-animation');
console.log('Перша анімація завершилася, запущено наступну.');
}
});