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 дозволяє зробити цей процес більш керованим і точним.

правити

Порада

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

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

Порада

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

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

Порада

Коли працюєте з різними браузерами, варто враховувати специфіку переходів у CSS і перевіряти, як різні браузери обробляють події transitionend. Це дозволить уникнути непередбачених помилок, пов'язаних із варіаціями обробки подій у різних середовищах.

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

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

Синтаксис

event.propertyName

Переглядачі

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

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

Переглядач
	2	4	6	12.1	12

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

Переглядач
	4.4	18	4	6

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

Переглядач
	-	-

Приклади

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

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

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';

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

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';