JS об'єкт TransitionEvent

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

TransitionEvent — це події в JavaScript, які відслідковують закінчення CSS-переходів на елементах сторінки. Основна мета — надати можливість виконати додаткові дії, коли візуальні переходи завершуються, наприклад, анімації зміни кольору, розміру або позиції.

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

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

event в цьому випадку є об'єктом події, що містить інформацію про завершений перехід, наприклад:

• propertyName — ім'я CSS-властивості, для якої завершився перехід.
• elapsedTime — час у секундах, який тривав перехід.
• pseudoElement — якщо перехід стосувався псевдоелементів, тут буде їх назва (наприклад, '::before').

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

box.addEventListener('transitionend', (event) => {
  if (event.propertyName === 'width') {
    console.log('Завершився перехід ширини!');
  }
});

У випадках, коли CSS-перехід переривається (наприклад, при зміні стилю до завершення анімації), подія transitionend не спрацює.

правити

Порада

Не всі браузери однаково обробляють скасовані переходи. Для кросбраузерності перевіряйте параметри переходу та обробляйте можливі виключення вручну.

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

Порада

Подія може також спрацьовувати для псевдоелементів, наприклад ::before. Перевіряйте event.pseudoElement, якщо це важливо для вашої логіки.

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

Порада

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

box.addEventListener('transitionend', (event) => {
  if (event.propertyName === 'opacity') {
    console.log('Прозорість завершила зміну!');
  }
});

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

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

Синтаксис

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

властивості

Переглядачі

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

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

Переглядач
	27	4	7	≤12.1	12	10

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

Переглядач
	4.4	27	4	7

Приклади

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

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

const box = document.querySelector('.box');
box.addEventListener('transitionend', () => {
  console.log('Анімація завершена!');
  box.style.backgroundColor = 'green';
});

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

const box = document.querySelector('.box');
let transitionsCount = 0;

box.addEventListener('transitionend', () => {
  transitionsCount++;
  console.log(`Кількість завершених переходів: ${transitionsCount}`);
});

<header>
  <h2 class="title">Transition Events</h2>
  <p class="description">Відстеження завершення CSS-переходів для інтерактивності.</p>
</header>
<main>
  <div class="result">
    <!-- Кнопка для демонстрації -->
    <button id="animatedButton">Натисни мене</button>
    <!-- Місце для відображення повідомлення -->
    <p id="message" style="margin-top: 20px; color: #333;"></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#animatedButton {
  background-color: #007BFF;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.5s ease; /* CSS-перехід для зміни стилів */
}

#animatedButton:hover {
  background-color: #0056b3;
}

/* Стиль після активації */
#animatedButton.active {
  transform: scale(1.5);
  background-color: #28a745;
}

// Отримуємо елементи
const button = document.getElementById('animatedButton');
const message = document.getElementById('message');

// Обробник натискання на кнопку
button.addEventListener('click', () => {
  // Додаємо клас "active" для запуску CSS-переходу
  button.classList.add('active');
  // Очищуємо попереднє повідомлення
  message.textContent = '';
});

// Відстежуємо завершення переходу
button.addEventListener('transitionend', event => {
  if (event.propertyName === 'transform') {
    // Після завершення анімації змінюємо повідомлення
    message.textContent = 'Анімація завершена!';
  }
});
//# sourceURL=pen.js