css.in.ua
Підтримати

Наповнення JS розділу

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

Ви також можете допомогти нам в цьому. Долучайтеся до нашої спільноти в дискорді - ставайте її частиною і допомагайте нашому розвитку.

Також, підтримуйте нас матеріально.

Підтримати матеріально

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 разом із параметрами animationiteration для відстеження кількості повторів анімації. Ви можете лічити кількість повторів і виконувати певні дії тільки після декількох ітерацій:

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

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

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

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

Синтаксис

event.animationName

Значення

Return

Переглядачі

Переглядач

43

5

9

30

12
Переглядач

43

43

5

9
Переглядач

-

-

Приклади


У цьому прикладі користувач може натискати на дві кнопки, які запускають дві різні анімації: "bounce" (стрибаюча коробка) або "fade" (зникнення). Коли будь-яка з цих анімацій завершиться, подія animationend активується, і за допомогою властивості animationName у тексті під полем виводиться назва завершеної анімації.

У цьому прикладі дві різні анімації, bounce та spin, змінюють властивості елемента після завершення кожної анімації. Це дозволяє керувати різними анімаціями, застосовуючи до них різні дії.

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

Цей приклад демонструє, як можна відкладати запуск нової анімації після завершення попередньої. Після того як анімація slideOut завершена, через секунду запускається анімація slideIn, що дозволяє створювати плавні переходи між анімаціями.

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

Документи

Зв'язок