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

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

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

Щоб працювати з подією transitionend, ви можете додати обробник події до елемента за допомогою методу addEventListener. Приклад:

const box = document.querySelector('.box');
box.addEventListener('transitionend', (event) => {
  console.log('Переход завершено для властивості: ', event.propertyName);
});

У цьому прикладі, коли завершиться перехід, пов'язаний з елементом box, буде виведено назву CSS-властивості, для якої завершився перехід. Об'єкт події, переданий в обробник, надає інформацію про те, яка саме властивість завершила свій перехід (властивість propertyName), тривалість переходу (elapsedTime), та який елемент запустив подію (target).

Важливо відзначити, що якщо елемент має кілька CSS-властивостей, до яких застосовано transition, подія transitionend буде викликана для кожної з цих властивостей окремо.

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

Типовий сценарій використання transitionend — це запуск додаткових анімацій або дій після завершення основного CSS-переходу. Наприклад, можна додати клас з новими стилями або виконати асинхронний код:

box.addEventListener('transitionend', () => {
  box.classList.add('new-style');
});

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

правити

Порада

У мобільних браузерах або при динамічних змінах DOM, події переходів можуть не спрацьовувати або спрацьовувати неправильно. Рекомендується використовувати зворотні виклики (callbacks) або проміси разом з подією transitionend, щоб забезпечити надійність коду.

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

Порада

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

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

Порада

Важливо відзначити, що для прихованих або заборонених елементів (наприклад, через display: none) подія transitionend не спрацьовує, оскільки для таких елементів не виконується жоден перехід. Рекомендується працювати з такими елементами через інші властивості, наприклад visibility або opacity.

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

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

Синтаксис

element.addEventListener('transitionend', function(event) {
  // Дії після завершення переходу
});

Переглядачі

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

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

Переглядач
	26	51	7	12.1	18	10*

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

Переглядач
	4.4	26	51	7

Приклади

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

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

let isAnimating = false;
const element = document.querySelector('.box');

element.addEventListener('click', () => {
  if (!isAnimating) {
    element.style.transition = 'transform 2s ease';
    element.style.transform = 'translateX(200px)';
    isAnimating = true;
  }
});

element.addEventListener('transitionend', () => {
  element.style.transition = 'opacity 1s ease';
  element.style.opacity = '0';
});

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

const element = document.querySelector('.box');
element.addEventListener('transitionend', (event) => {
  if (event.propertyName === 'transform') {
    console.log('Трансформація завершена, запускаємо наступну анімацію.');
    element.style.opacity = '1'; // Запуск нової анімації
  }
});