JS властивість CSSStyleDeclaration.transitionDelay

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

element.style.transitionDelay – це властивість, яка встановлює затримку перед початком анімації CSS-переходу на елементі. Це значення задається у секундах (s) або мілісекундах (ms) і дозволяє контролювати, коли саме почнеться анімація після зміни властивостей CSS.

Використання transitionDelay може бути особливо корисним для створення послідовних анімацій або для відстрочення анімації до певного моменту. Наприклад, щоб встановити затримку перед початком анімації зміни ширини елемента на 2 секунди, можна зробити наступне:

const element = document.getElementById('box');
element.style.transitionProperty = 'width';
element.style.transitionDuration = '2s';
element.style.transitionDelay = '2s';
element.style.width = '300px';

У цьому прикладі зміна ширини елемента відбудеться через 2 секунди після застосування стилю, а сама анімація триватиме 2 секунди.

Якщо потрібно встановити затримку для кількох властивостей, можна вказати кілька значень через кому. Наприклад, щоб встановити затримку 1 секунду для зміни ширини та 2 секунди для зміни висоти:

element.style.transitionProperty = 'width, height';
element.style.transitionDuration = '2s, 3s';
element.style.transitionDelay = '1s, 2s';
element.style.width = '300px';
element.style.height = '200px';

У цьому випадку ширина елемента почне змінюватися через 1 секунду, а висота – через 2 секунди.

transitionDelay також може бути корисним для створення каскадних анімацій, де кілька елементів анімуються послідовно. Наприклад, можна створити ефект, де кожен наступний елемент починає анімацію після певного проміжку часу:

const elements = document.querySelectorAll('.box');
elements.forEach((element, index) => {
    element.style.transitionProperty = 'opacity';
    element.style.transitionDuration = '1s';
    element.style.transitionDelay = `${index * 0.5}s`;
    element.style.opacity = '1';
});

У цьому прикладі кожен елемент класу box починає змінювати прозорість із затримкою, що збільшується на 0.5 секунди для кожного наступного елемента.

Затримку можна змінювати динамічно залежно від взаємодії користувача. Наприклад, при наведенні курсору на елемент можна встановити одну затримку, а при знятті наведення – іншу:

element.addEventListener('mouseover', () => {
    element.style.transitionDelay = '0s';
    element.style.width = '400px';
});

element.addEventListener('mouseout', () => {
    element.style.transitionDelay = '1s';
    element.style.width = '100px';
});

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

Отже, element.style.transitionDelay є потужним інструментом для керування затримкою перед початком анімації CSS-переходу, що дозволяє створювати складніші та привабливіші анімаційні ефекти на веб-сторінках.

правити

Порада

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

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

Порада

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

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

Порада

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

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

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

Синтаксис

element.style.transitionDelay

Переглядачі

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

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

Переглядач
	1	1	3	8	12

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

Переглядач
	4.4	18	4	1

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

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

Приклади

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

<div class="list-item">перший елемент list-item</div>
<div class="list-item">другий елемент list-item</div>

const elements = document.querySelectorAll('.list-item');
elements.forEach((element, index) => {
    element.style.transitionProperty = 'opacity';
    element.style.transitionDuration = '1s';
    element.style.transitionDelay = `${index * 0.3}s`;
    element.style.opacity = '1';
});

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

const box = document.getElementById('box');

box.addEventListener('mouseover', () => {
    box.style.transitionProperty = 'background-color, transform';
    box.style.transitionDuration = '1s, 1s';
    box.style.transitionDelay = '0s, 0.5s';
    box.style.backgroundColor = 'blue';
    box.style.transform = 'scale(1.2)';
});

box.addEventListener('mouseout', () => {
    box.style.transitionProperty = 'background-color, transform';
    box.style.transitionDuration = '1s, 1s';
    box.style.transitionDelay = '0.5s, 0s';
    box.style.backgroundColor = 'red';
    box.style.transform = 'scale(1)';
});