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` збільшується з кожною ітерацією, а не скидається. Це дозволяє визначити загальну кількість часу, витраченого на всі ітерації.
Порада:	У випадку з анімаціями, що мають `animation-play-state: paused`, `elapsedTime` показує час до паузи, а не продовжує збільшуватись. Це корисно для відстеження загального часу в момент паузи і дозволяє відновити з цього моменту.
Порада:	Для асинхронних ефектів краще перевіряти `elapsedTime` в межах подій, пов'язаних з анімаціями (`animationend`, `animationiteration`), щоб мати актуальну інформацію, яка завжди буде в контексті вашого поточного стану анімації.

Синтаксис

event.elapsedTime

Значення

Return

Переглядачі

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

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

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

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/GRVrZGX">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

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

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

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

JS довідник

JavaScript

Наповнення JS розділу