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) або проміси разом з подією |
| Порада: | Коли переходи є частиною складної анімації, подія |
| Порада: | Важливо відзначити, що для прихованих або заборонених елементів (наприклад, через |
Синтаксис
element.addEventListener('transitionend', function(event) {
// Дії після завершення переходу
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Цей код дозволяє користувачеві взаємодіяти з блоком через кнопку, яка змінює його розмір. Подія transitionend відстежує завершення зміни розміру блоку, і коли перехід завершено, з’являється повідомлення "Анімація завершена!". Це дозволяє зрозуміти, як працює transitionend для контролю завершення анімаційних переходів на сторінці.
У цьому прикладі спершу спрацьовує перехід для властивості transform, після чого запускається зміна властивості opacity. Такий підхід дозволяє реалізовувати складні анімації в кілька етапів, де кожна наступна залежить від попередньої.
const element = document.querySelector('.box');
element.addEventListener('transitionend', (event) => {
if (event.propertyName === 'transform') {
console.log('Трансформація завершена, запускаємо наступну анімацію.');
element.style.opacity = '1'; // Запуск нової анімації
}
});Тут перша подія запускає перехід елемента по осі X, після завершення якого починається зміна прозорості. Такий ланцюжок анімацій зручно використовувати для побудови складних інтерактивних інтерфейсів.
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';
});