JS властивість Event.animationstart
Загальний опис
animationstart — це подія, яка виникає у веб-браузері, коли CSS-анімація починається. Ця подія дозволяє JavaScript-коду реагувати на момент, коли анімація запускається, що може бути корисним для ініціалізації певних дій або зміни стану елементів на сторінці. Подія animationstart може використовуватися для різних цілей, таких як відстеження початку анімацій, зміни стилів, запуск інших процесів або навіть зупинення анімаційних циклів за певних умов.
Для використання події animationstart необхідно додати обробник подій до елемента, на якому застосовується CSS-анімація. Це робиться за допомогою методу addEventListener(), який дозволяє виконувати певну функцію у відповідь на подію. Наприклад:
const element = document.querySelector('.animated-element');
element.addEventListener('animationstart', function(event) {
console.log('Анімація розпочалася на елементі:', event.target);
});
У цьому прикладі, коли анімація на елементі з класом .animated-element починається, у консолі браузера з'являється повідомлення із зазначенням елемента, на якому анімація почалася.
Подія animationstart є особливо корисною в динамічних веб-додатках, де необхідно виконати певні дії на початку анімації, наприклад, додати нові стилі, запустити інші анімації або зупинити виконання коду до початку анімації. Важливо відзначити, що ця подія виникає тільки один раз на початку кожного циклу анімації, тому вона не повторюється для кожного повторення циклу.
Властивості об'єкта події, які можна використовувати з animationstart, включають animationName (назва анімації), elapsedTime (час, що пройшов з моменту початку анімації) та pseudoElement (ім'я псевдоелемента, на якому спрацювала анімація, якщо застосовано). Це дозволяє розробникам створювати складні логічні умови в коді:
element.addEventListener('animationstart', function(event) {
if (event.animationName === 'fadeIn') {
console.log('Анімація "fadeIn" почалася.');
}
});
| Порада: | Завжди враховуйте можливість скасування анімацій (наприклад, через JavaScript або зміну стилів). У таких випадках подія |
| Порада: | Використовуйте подію |
| Порада: | Подія |
Синтаксис
element.addEventListener('animationstart', function(event) {
// Ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі, коли користувач натискає на кнопку, запускається анімація руху на квадраті. Подія animationstart спрацьовує на початку анімації, змінюючи текст кнопки та відображаючи повідомлення про старт анімації. Після завершення анімації, подія animationend відновлює початковий текст кнопки і дозволяє користувачу повторно запускати анімацію. Це надає користувачу інтерактивний досвід роботи з анімаціями на веб-сторінці.
У цьому прикладі при запуску анімації на елементі .box змінюється стиль його бордера. Це може бути корисним для візуального індикації початку анімації або підготовки елемента до анімаційного ефекту.
const box = document.querySelector('.box');
box.addEventListener('animationstart', function(event) {
box.style.border = '2px solid red';
console.log('Анімація почалася, змінено стиль бордера.');
});Цей приклад демонструє, як можна використовувати подію animationstart для запуску іншої анімації після початку першої. Після початку анімації на firstElement, клас start-second-animation додається до secondElement, що запускає наступну анімацію. Це корисно для створення складних анімаційних послідовностей, де елементи з'являються або змінюються один за одним.
const firstElement = document.querySelector('.first');
const secondElement = document.querySelector('.second');
firstElement.addEventListener('animationstart', function(event) {
console.log('Перша анімація почалася, запускаємо другу.');
secondElement.classList.add('start-second-animation');
});