JS властивість Event.elapsedTime

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

AnimationEvent.elapsedTime — це властивість, яка вказує кількість часу в секундах, що минула з моменту початку анімації до моменту її завершення або зупинки. Значення цієї властивості зазвичай використовується в анімаціях CSS, де вона дає можливість відслідковувати тривалість програвання анімації на поточний момент. Наприклад, ця властивість є особливо корисною при роботі з подіями animationstart, animationend та animationiteration, оскільки вона дозволяє визначити, скільки секунд минуло від початку анімації до події.

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

element.addEventListener('animationiteration', function(event) {
  console.log(`Анімація пройшла: ${event.elapsedTime} секунд`);
});

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

element.addEventListener('animationend', function(event) {
  if (event.elapsedTime > 2) {
    console.log('Анімація тривала більше 2 секунд');
  }
});

Також, elapsedTime стає в нагоді для виконання специфічних дій, коли анімація наближається до кінця або повторюється. За допомогою цієї властивості можна створювати ефекти, прив'язані до тривалості анімації, що допомагає налаштовувати користувацький досвід у веб-додатках.

правити

Порада

Коли анімація повторюється, значення elapsedTime збільшується з кожною ітерацією, а не скидається. Це дозволяє визначити загальну кількість часу, витраченого на всі ітерації.

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

Порада

У випадку з анімаціями, що мають animation-play-state: paused, elapsedTime показує час до паузи, а не продовжує збільшуватись. Це корисно для відстеження загального часу в момент паузи і дозволяє відновити з цього моменту.

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

Порада

Для асинхронних ефектів краще перевіряти elapsedTime в межах подій, пов'язаних з анімаціями (animationend, animationiteration), щоб мати актуальну інформацію, яка завжди буде в контексті вашого поточного стану анімації.

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

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

Синтаксис

event.elapsedTime

Переглядачі

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

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

Переглядач
	43	5	9	30	12

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

Переглядач
	43	43	5	9

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

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

Приклади

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

<div id="demo-element">Демонстраційний елемент</div>

const element = document.getElementById('demo-element');

element.addEventListener('animationend', function(event) {
  if (event.elapsedTime > 5) {
    console.log('Анімація тривала більше 5 секунд');
  }
});

<div id="demo-element">Демонстраційний елемент</div>

const element = document.getElementById('demo-element');

element.addEventListener('animationiteration', function(event) {
  console.log(`Ітерація анімації завершена, час з початку: ${event.elapsedTime} секунд`);
  if (event.elapsedTime > 10) {
    console.log('Анімація тривала більше 10 секунд після кількох ітерацій');
  }
});