animationend — подія завершення CSS-анімації в JavaScript
Загальний опис
animationend — це подія, яка виникає у веб-браузері, коли CSS-анімація завершила своє виконання. Ця подія є частиною веб-стандарту для обробки анімацій і дозволяє JavaScript-коду реагувати на завершення анімаційних ефектів на веб-сторінці. Подія animationend може бути використана для виконання додаткових дій, як-от зміна стилів, відправлення аналітики або ініціалізація наступних анімацій.
Щоб використовувати подію animationend в JavaScript, потрібно додати обробник подій до елемента, на якому виконується анімація. Це можна зробити за допомогою методу addEventListener(), який дозволяє визначити функцію, що виконується, коли анімація завершується. Наприклад:
const element = document.querySelector('.animated-element');
element.addEventListener('animationend', function(event) {
console.log('Анімація завершилася на елементі:', event.target);
});
У цьому прикладі, коли анімація на елементі з класом .animated-element завершиться, в консолі браузера з'явиться повідомлення із зазначенням, на якому елементі це сталося.
Подія animationend може бути корисною в різних ситуаціях, наприклад, коли потрібно очистити DOM після анімації видалення елемента, або коли необхідно запускати наступні анімації в певній послідовності. Подія надає інформацію про властивості анімації, що завершилася, такі як її назва (animationName), тривалість (elapsedTime), та ім'я властивості CSS, яка була анімована.
Щоб обробляти різні анімації на одному елементі, можна використовувати об'єкт події event, який передається до обробника події. Цей об'єкт містить властивість animationName, що дозволяє визначити, яка саме анімація завершилася, і в залежності від цього виконати відповідні дії:
element.addEventListener('animationend', function(event) {
if (event.animationName === 'fade-out') {
event.target.style.display = 'none';
}
});
У цьому прикладі, якщо анімація, що завершилася, має назву fade-out, елемент буде приховано.
- Порада
-
Подія
автор: Bondanimationendможе бути корисною для динамічних інтерфейсів, де анімації використовуються для привертання уваги до важливих дій або переходів. Наприклад, можна змінити вигляд кнопки після завершення анімації підтвердження кліку. - Порада
-
Якщо у вас є анімація, яка повторюється (наприклад, з
автор: Bondanimation-iteration-count: infinite), подіяanimationendне виникатиме, доки анімація не завершить усі повторення. Для відстеження кожного циклу анімації використовуйте подіюanimationiteration. - Порада
-
Для підвищення продуктивності додайте і видаляйте обробники подій, коли вони більше не потрібні. Це особливо важливо для сторінок з великою кількістю анімацій, щоб уникнути витоків пам'яті та зниження продуктивності.
автор: Bond
Синтаксис
element.addEventListener('animationend', function(event) {
// Ваш код тут
});
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 79 | 51 | 9 | 66 | 18 | 10* |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 79 | 79 | 51 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому прикладі кнопка на сторінці дозволяє користувачу запускати анімацію на квадраті. Коли анімація закінчується, подія animationend спрацьовує, змінюючи колір квадрата та показуючи повідомлення. Це дозволяє користувачам наочно побачити результат роботи з подією animationend і зрозуміти, як можна використовувати цю подію для створення інтерактивних веб-сторінок.
HTML
<header>
<h2 class="title">Event -> animationend</h2>
<p class="description">Виконання коду після завершення CSS-анімації</p>
</header>
<main>
<div class="result">
<!-- Кнопка для запуску анімації -->
<button id="startAnimation">Запустити анімацію</button>
<!-- Елемент, на якому виконується анімація -->
<div id="animatedBox"></div>
<!-- Повідомлення після завершення анімації -->
<p id="output">Натисніть кнопку, щоб розпочати анімацію.</p>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
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;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
#animatedBox {
width: 100px;
height: 100px;
background-color: #007bff;
margin-top: 20px;
position: relative;
}
@keyframes moveAndGrow {
0% {
transform: translateX(0) scale(1);
background-color: #007bff;
}
50% {
transform: translateX(200px) scale(1.5);
background-color: #ff5733;
}
100% {
transform: translateX(400px) scale(2);
background-color: #28a745;
}
}
.animate {
animation: moveAndGrow 3s ease-in-out forwards;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #0056b3;
}
p#output {
margin-top: 15px;
font-size: 18px;
}JS
// Отримуємо елементи кнопки та блока
const button = document.getElementById('startAnimation');
const box = document.getElementById('animatedBox');
const output = document.getElementById('output');
// Додаємо обробник події 'click' на кнопку для запуску анімації
button.addEventListener('click', function () {
// Видаляємо клас, щоб "обнулити" анімацію
box.classList.remove('animate');
// Перезапускаємо анімацію через невелике затримання (щоб браузер встиг оновити DOM)
setTimeout(() => {
box.classList.add('animate');
output.textContent = "Анімація запущена!";
}, 10); // 10 мс затримки для повторного додавання класу
});
// Додаємо обробник події 'animationend' для елемента
box.addEventListener('animationend', function () {
// Коли анімація завершується, змінюємо текст та колір
output.textContent = "Анімація завершена!";
box.style.backgroundColor = "#6f42c1"; // Зміна кольору після завершення
});
//# sourceURL=pen.jsУ цьому прикладі після завершення анімації slide-in на елементі .box змінюється стиль бордера. Це може бути корисно для візуального зворотного зв'язку користувачу після виконання анімації.
HTML
<div class="box">перший елемент box</div>
<div class="box">другий елемент box</div>JS
const box = document.querySelector('.box');
box.addEventListener('animationend', function(event) {
if (event.animationName === 'slide-in') {
event.target.style.border = '2px solid green';
console.log('Анімація завершилася, бордер встановлено.');
}
});Цей приклад демонструє ланцюгове виконання анімацій. Після завершення першої анімації fade-out на першому елементі, запускається друга анімація на іншому елементі. Це може бути використано для послідовного виконання анімаційних ефектів у складних інтерфейсах користувача.
HTML
<div class="first">перший елемент first</div>
<div class="first">другий елемент first</div>
<div class="second">перший елемент second</div>
<div class="second">другий елемент second</div>JS
const firstElement = document.querySelector('.first');
const secondElement = document.querySelector('.second');
firstElement.addEventListener('animationend', function(event) {
if (event.animationName === 'fade-out') {
secondElement.classList.add('start-next-animation');
console.log('Перша анімація завершилася, запущено наступну.');
}
});Коментарі
Коментарів ще немає — будьте першим!