JS об'єкт AnimationEvent

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

AnimationEvent – це події, що активуються під час виконання CSS-анімацій. Вони включають такі події, як animationstart (початок анімації), animationiteration (кожна нова ітерація анімації) та animationend (завершення анімації). З їх допомогою JavaScript може реагувати на зміни стану анімації елементів у DOM, створюючи інтерактивні та динамічні ефекти.

Щоб використати AnimationEvent, спочатку потрібно додати CSS-анімацію до елемента. Наприклад, якщо у CSS створена анімація для елемента з ключовими кадрами, JavaScript може реагувати на етапи цієї анімації, використовуючи події, описані нижче.

Для відстеження початку анімації застосовується animationstart:

element.addEventListener('animationstart', (event) => {
  console.log('Анімація почалась для елемента:', event.target);
});

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

Подія animationiteration відслідковує кожну нову ітерацію (повторення) анімації:

element.addEventListener('animationiteration', (event) => {
  console.log('Ітерація анімації для елемента:', event.target);
});

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

Подія animationend спрацьовує, коли анімація завершується:

element.addEventListener('animationend', (event) => {
  console.log('Анімація завершилась для елемента:', event.target);
});

animationend можна використовувати для повернення елемента у вихідний стан або очищення ресурсів після завершення анімації. Під час роботи з AnimationEvent варто враховувати об’єкт event, який містить властивості, такі як elapsedTime (час з моменту початку анімації) і animationName (назва анімації). Ці властивості корисні для контролю анімації, коли необхідно реагувати на певні ефекти, що виникають під час роботи анімації.

правити

Порада

event.elapsedTime може бути корисним для отримання інформації про тривалість анімації, що дозволяє контролювати або логувати час виконання анімації. Використовуйте console.log(event.elapsedTime), щоб швидко оцінити продуктивність анімації.

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

Порада

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

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

Порада

Щоб зупиняти анімацію умовно, наприклад, при певній кількості ітерацій, можна додати лічильник, який збільшується на animationiteration і припиняє анімацію, коли досягнуто потрібного значення, використовуючи CSS або JavaScript.

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

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

Синтаксис

element.addEventListener('animationstart', function(event) { /* Код для початку анімації */ });
element.addEventListener('animationiteration', function(event) { /* Код для повторення анімації */ });
element.addEventListener('animationend', function(event) { /* Код для завершення анімації */ });

властивості

Переглядачі

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

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

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

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

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

Приклади

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

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

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

let counter = 0;
element.addEventListener('animationend', (event) => {
  if (counter < 5) {
    event.target.style.animation = 'none';
    setTimeout(() => event.target.style.animation = '', 0); // Перезапуск анімації
    counter++;
  }
});

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

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

element.addEventListener('animationiteration', (event) => {
  if (event.elapsedTime > 2) {
    event.target.classList.add('highlight'); // Додає клас після першої ітерації
  }
});

<header>
  <h2 class="title">Animation Events</h2>
  <p class="description">Відстеження початку, ітерацій та завершення анімації в JavaScript</p>
</header>
<main>
  <div class="result">
    <button id="startAnimationButton">Запустити анімацію</button>
    <div id="animatedBox" class="box"></div>
    <div id="eventLog">
      <h3>Журнал подій:</h3>
      <ul id="logList"></ul>
    </div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#animatedBox {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 20px 0;
  animation: none;
}

@keyframes boxAnimation {
  0% { transform: scale(1); background-color: #3498db; }
  50% { transform: scale(1.5); background-color: #e74c3c; }
  100% { transform: scale(1); background-color: #3498db; }
}

#eventLog {
  margin-top: 20px;
}

#logList {
  list-style-type: none;
  padding: 0;
}

#logList li {
  padding: 5px;
  border-bottom: 1px solid #ccc;
}

const animatedBox = document.getElementById('animatedBox');
const startAnimationButton = document.getElementById('startAnimationButton');
const logList = document.getElementById('logList');

// Функція для додавання запису в журнал подій
function logEvent(message) {
  const logItem = document.createElement('li');
  logItem.textContent = message;
  logList.appendChild(logItem);
}

// Запускає анімацію на кнопці "Запустити анімацію"
startAnimationButton.addEventListener('click', () => {
  animatedBox.style.animation = 'boxAnimation 2s ease-in-out infinite';
  logEvent('Анімація запущена');
});

// Обробляє подію animationstart
animatedBox.addEventListener('animationstart', event => {
  logEvent(`Подія: animationstart; Назва анімації: ${event.animationName}`);
});

// Обробляє подію animationiteration
animatedBox.addEventListener('animationiteration', event => {
  logEvent(`Подія: animationiteration; Час ітерації: ${event.elapsedTime}s`);
});

// Обробляє подію animationend
animatedBox.addEventListener('animationend', event => {
  logEvent(`Подія: animationend; Анімація завершена`);
  animatedBox.style.animation = 'none'; // Скидання анімації після завершення
});
//# sourceURL=pen.js