JS властивість Event.propertyName
Загальний опис
propertyName — це властивість, яка доступна в об'єкті TransitionEvent. Вона повертає рядок із назвою CSS-властивості, зміна якої спричинила поточний перехід. Ця властивість є корисною під час відстеження переходів CSS і дозволяє програмістам визначати, яка саме властивість змінила своє значення. Кожного разу, коли відбувається CSS-перехід (transition), подія transitionend спрацьовує, і завдяки propertyName можна знати, що саме змінилося.
Зазвичай, TransitionEvent використовується разом з подіями transitionend, transitionstart або transitioncancel, що дозволяє програмістам контролювати завершення або початок переходів анімацій у CSS. Це зручно, коли на елементі відбуваються кілька CSS-переходів одночасно, і треба знати, яка саме властивість завершила свою анімацію. Наприклад, якщо на елементі змінюються колір і ширина одночасно, властивість propertyName допоможе дізнатися, що саме завершилося: зміна кольору чи зміна ширини.
Приклад використання:
element.addEventListener('transitionend', function(event) {
console.log("Перехід завершено для властивості: " + event.propertyName);
});
У цьому прикладі подія transitionend викликається після завершення CSS-переходу. Властивість propertyName повертає назву властивості, що закінчила свій перехід, що дозволяє більш детально керувати поведінкою елемента після анімації.
Ця функціональність корисна для створення складних анімацій, які залежать від завершення певних переходів. Наприклад, після завершення зміни кольору можна запустити наступну анімацію або виконати певну логіку, що потребує синхронізації з переходами. propertyName дозволяє зробити цей процес більш керованим і точним.
| Порада: | Переконайтеся, що ви використовуєте |
| Порада: | Використання |
| Порада: | Коли працюєте з різними браузерами, варто враховувати специфіку переходів у CSS і перевіряти, як різні браузери обробляють події |
Синтаксис
event.propertyNameЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
2 |
4 |
6 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
6 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі, після натискання кнопки, змінюються три CSS-властивості елемента .box: колір фону, ширина і прозорість. Коли кожен перехід завершується, спрацьовує подія transitionend, і за допомогою властивості propertyName виводиться повідомлення про те, яка саме властивість завершила свій перехід. Користувач може бачити, яка з анімацій завершилася першою або останньою.
У цьому прикладі одночасно змінюються дві CSS-властивості: колір фону та ширина елемента. Використовуючи propertyName, можна відрізнити завершення переходу для кожної з цих властивостей. Це може бути корисним у випадках, коли потрібно виконувати різну логіку після завершення певних анімацій.
const box = document.querySelector('.box');
box.addEventListener('transitionend', function(event) {
if (event.propertyName === 'background-color') {
console.log("Перехід кольору завершено");
} else if (event.propertyName === 'width') {
console.log("Перехід зміни ширини завершено");
}
});
// Запуск переходу
box.style.backgroundColor = 'blue';
box.style.width = '300px';У цьому прикладі спочатку змінюється висота елемента, а після її завершення змінюється колір фону. Це демонструє використання propertyName для послідовного запуску переходів, що дозволяє створювати більш складні анімаційні ефекти з контролем за їхньою черговістю.
const box = document.querySelector('.box');
box.addEventListener('transitionend', function(event) {
if (event.propertyName === 'height') {
box.style.backgroundColor = 'red'; // Зміна кольору після завершення анімації зміни висоти
} else if (event.propertyName === 'background-color') {
console.log("Усі переходи завершено");
}
});
// Запуск анімації
box.style.height = '200px';