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, елемент буде приховано.

правити

Порада

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

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

Порада

Якщо у вас є анімація, яка повторюється (наприклад, з animation-iteration-count: infinite), подія animationend не виникатиме, доки анімація не завершить усі повторення. Для відстеження кожного циклу анімації використовуйте подію animationiteration.

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

Порада

Для підвищення продуктивності додайте і видаляйте обробники подій, коли вони більше не потрібні. Це особливо важливо для сторінок з великою кількістю анімацій, щоб уникнути витоків пам'яті та зниження продуктивності.

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

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

Синтаксис

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

Переглядачі

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

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

Переглядач
	66	57	11.1	53	16

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

Переглядач
	66	66	57	11.3

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

Переглядач
	15.0.0	1.0

Приклади

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

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

const box = document.querySelector('.box');

box.addEventListener('animationend', function(event) {
  if (event.animationName === 'slide-in') {
    event.target.style.border = '2px solid green';
    console.log('Анімація завершилася, бордер встановлено.');
  }
});

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

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('Перша анімація завершилася, запущено наступну.');
  }
});