JS властивість Event.animationName

Загальний опис

animationName — це властивість об'єкта AnimationEvent, яка повертає рядок з назвою CSS-анімації, що була активована на елементі. Коли на веб-сторінці виконується анімація, що триває певний проміжок часу, JavaScript може реагувати на події початку, завершення або повтору цієї анімації. Властивість animationName дозволяє отримати ім'я анімації, яке було визначене в CSS за допомогою ключа @keyframes. Це корисно в ситуаціях, коли один елемент може мати кілька анімацій і вам потрібно знати, яка з них саме запустила подію.

При роботі з подіями анімацій (animationstart, animationend, animationiteration), властивість animationName може допомогти відрізнити одну анімацію від іншої. Це особливо корисно, коли на одному елементі використовується декілька анімацій, і кожна має свій власний набір подій.

Наприклад:

element.addEventListener('animationend', (event) => {
  console.log('Анімація завершена: ' + event.animationName);
});

У цьому прикладі, коли анімація на елементі завершується, властивість animationName виводить ім'я тієї анімації, яка завершилася.

Якщо анімація повторюється (використовуються події на кшталт animationiteration), властивість animationName також дозволяє контролювати, на якому етапі відбувається повторення тієї чи іншої анімації:

element.addEventListener('animationiteration', (event) => {
  console.log('Повтор анімації: ' + event.animationName);
});

Таким чином, animationName є потужним інструментом для керування взаємодіями з анімаціями в JavaScript, дозволяючи програмісти отримувати більше контролю над поведінкою CSS-анімацій, відстежуючи кожну подію, що відбувається під час виконання анімацій.

правити

Порада

Для складних анімацій можна використовувати animationName як індикатор для відстеження стану анімацій та подій. Це може бути корисно для складної логіки, яка залежить від порядку виконання кількох анімацій.

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

Порада

Використовуйте animationName разом із параметрами animationiteration для відстеження кількості повторів анімації. Ви можете лічити кількість повторів і виконувати певні дії тільки після декількох ітерацій:

let count = 0;
element.addEventListener('animationiteration', (event) => {
  count++;
  if (count === 3 && event.animationName === 'slide') {
    // дія після третього повтору slide
  }
});

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

Порада

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

element.addEventListener('animationend', (event) => {
  if (event.animationName === 'fadeIn') {
    // виконати щось для fadeIn
  }
});

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

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

Синтаксис

event.animationName

Переглядачі

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

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

Переглядач
	43	5	9	30	12

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

Переглядач
	43	43	5	9

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

Переглядач
	-	-

Приклади

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

<div id="demo-element">Демонстраційний елемент</div>

const element = document.getElementById('demo-element');

element.addEventListener('animationend', (event) => {
  if (event.animationName === 'bounce') {
    element.style.opacity = '0.5';
  } else if (event.animationName === 'spin') {
    element.style.transform = 'scale(1.5)';
  }
});

<div id="demo-element">Демонстраційний елемент</div>

const element = document.getElementById('demo-element');

element.addEventListener('animationend', (event) => {
  if (event.animationName === 'slideOut') {
    setTimeout(() => {
      element.classList.remove('slideOut');
      element.classList.add('slideIn');
    }, 1000);
  }
});