JS об'єкт Transition
Загальний опис
Transition Events — це події в 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 не спрацює.
| Порада: | Якщо ваш елемент має кілька CSS-переходів, |
| Порада: | Подія може також спрацьовувати для псевдоелементів, наприклад |
| Порада: | Не всі браузери однаково обробляють скасовані переходи. Для кросбраузерності перевіряйте параметри переходу та обробляйте можливі виключення вручну. |
Синтаксис
element.addEventListener('transitionend', function(event) {
// Ваш код
});Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
27 |
4 |
7 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
27 |
4 |
7 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
При натисканні на кнопку вона плавно збільшиться в розмірі та змінить колір. Після завершення анімації під кнопкою з’явиться повідомлення "Анімація завершена!". Цей приклад підходить для демонстрації принципів роботи з transitionend та створення інтерактивних елементів.
Цей код змінює колір елемента на зелений після завершення CSS-анімації. Це корисно, коли потрібно динамічно змінити стан елемента після завершення анімації.
const box = document.querySelector('.box');
box.addEventListener('transitionend', () => {
console.log('Анімація завершена!');
box.style.backgroundColor = 'green';
});У цьому прикладі відстежується кількість завершених переходів для певного елемента. Це може бути корисним у складних інтерактивних сценаріях, коли треба точно знати кількість виконаних змін.
const box = document.querySelector('.box');
let transitionsCount = 0;
box.addEventListener('transitionend', () => {
transitionsCount++;
console.log(`Кількість завершених переходів: ${transitionsCount}`);
});Методи
Властивості
propertyName- Ця властивість об'єкта події (`event`) повертає ім'я CSS-властивості, для якої завершився перехід. Наприклад, якщо анімується зміна ширини елемента, значення буде `"width"`. Використовується для визначення, яка саме властивість завершила перехід.
elapsedTime- Ця властивість вказує, скільки часу в секундах тривав перехід, до моменту, коли подія `transitionend` була викликана. Значення базується на `transition-duration`, встановленій у стилях.
pseudoElement- Властивість повертає назву псевдоелемента (наприклад, `::before` або `::after`), якщо подія `transitionend` була викликана для такого елемента. Якщо перехід не стосується псевдоелементів, повертається порожній рядок (`""`).