Як відстежити прогрес / закінчення CSS @keyframes анімацій або плавних переходів, реалізованих за допомогою transition, у JS?

Повне пояснення

Що це і навіщо

CSS‑анімації (@keyframes) та плавні переходи (transition) дозволяють створювати візуальні ефекти без JavaScript. Однак часто потрібен сигнал про завершення, щоб виконати логіку (наприклад, змінити стан компонента).

Ключові принципи

• animationend – тригериться після останнього кадру анімації.
• transitionend – тригериться після завершення всіх перехідних властивостей.
• Події надходять з об’єктом Event, що містить властивість propertyName (для transition) і animationName (для animation).

Як це працює

Браузер під час рендерингу відстежує таймінги анімацій/transition. Коли таймер досягає кінця, генерується подія, яку можна обробити в JS.

Практика і реалізація

const el = document.querySelector('.box');
el.addEventListener('animationend', (e) => {
  if (e.animationName === 'fadeIn') console.log('Animation finished');
});
el.addEventListener('transitionend', (e) => {
  if (e.propertyName === 'opacity') console.log('Transition finished');
});

Тестування

У Jest можна мокати requestAnimationFrame і перевіряти, що обробники викликаються після таймерів. У Cypress можна спостерігати за animationend через .trigger('animationend').

Оптимізація продуктивності

Не додавайте зайві обробники; використовуйте once: true, щоб автоматично видалити слухач після першого виклику.

Accessibility

Події не впливають на доступність, але варто переконатися, що анімації не заважають користувачам з руховою дисфункцією (наприклад, використовуючи prefers-reduced-motion).

Безпека та валідація

Події не несуть безпеки, але слід уникати виконання небезпечного коду у колбеках.

Типові помилки й edge cases

• Перевірка propertyName потрібна, коли є кілька transition.
• Якщо анімація повторюється (animation-iteration-count: infinite), animationend не спрацьовує.

Cheatsheet + follow‑up питання

• animationend vs transitionend – коли використовувати?
• Як обробити анімації, що мають animation-delay?
• Чи можна використовувати requestAnimationFrame замість подій?