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

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

animationstart — це подія, яка виникає у веб-браузері, коли CSS-анімація починається. Ця подія дозволяє JavaScript-коду реагувати на момент, коли анімація запускається, що може бути корисним для ініціалізації певних дій або зміни стану елементів на сторінці. Подія animationstart може використовуватися для різних цілей, таких як відстеження початку анімацій, зміни стилів, запуск інших процесів або навіть зупинення анімаційних циклів за певних умов.

Для використання події animationstart необхідно додати обробник подій до елемента, на якому застосовується CSS-анімація. Це робиться за допомогою методу addEventListener(), який дозволяє виконувати певну функцію у відповідь на подію. Наприклад:

const element = document.querySelector('.animated-element');

element.addEventListener('animationstart', function(event) {
  console.log('Анімація розпочалася на елементі:', event.target);
});

У цьому прикладі, коли анімація на елементі з класом .animated-element починається, у консолі браузера з'являється повідомлення із зазначенням елемента, на якому анімація почалася.

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

Властивості об'єкта події, які можна використовувати з animationstart, включають animationName (назва анімації), elapsedTime (час, що пройшов з моменту початку анімації) та pseudoElement (ім'я псевдоелемента, на якому спрацювала анімація, якщо застосовано). Це дозволяє розробникам створювати складні логічні умови в коді:

element.addEventListener('animationstart', function(event) {
  if (event.animationName === 'fadeIn') {
    console.log('Анімація "fadeIn" почалася.');
  }
});

правити

Порада

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

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

Порада

Завжди враховуйте можливість скасування анімацій (наприклад, через JavaScript або зміну стилів). У таких випадках подія animationstart може спрацьовувати навіть при повторному відтворенні анімації. Переконайтеся, що ваш обробник подій готовий до цього.

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

Порада

Використовуйте подію animationstart для відстеження та логування початку анімацій, що може бути корисно для налагодження складних анімаційних послідовностей або для збору аналітичних даних про взаємодію користувачів зі сторінкою.

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

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

Синтаксис

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

Переглядачі

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

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

Переглядач
	79	51	9	66	18	10*

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

Переглядач
	79	79	51	9

Приклади

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

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

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

box.addEventListener('animationstart', function(event) {
  box.style.border = '2px solid red';
  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('animationstart', function(event) {
  console.log('Перша анімація почалася, запускаємо другу.');
  secondElement.classList.add('start-second-animation');
});