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

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

element.style.transitionDuration – це властивість, яка дозволяє встановити тривалість часу для анімації CSS-переходу на елементі. Вона визначає, скільки часу займе завершення переходу від одного стану CSS до іншого.

Встановити transitionDuration можна як за допомогою CSS, так і за допомогою JavaScript. Значення цієї властивості задається в секундах (s) або мілісекундах (ms). Наприклад, значення 2s означає, що перехід триватиме 2 секунди, а 500ms означає тривалість 500 мілісекунд.

Щоб використовувати transitionDuration у JavaScript, спочатку потрібно вибрати елемент, до якого ви хочете застосувати анімацію, і задати відповідні стилі. Ось приклад коду, де встановлюється тривалість переходу для зміни ширини елемента:

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

У цьому прикладі властивість transitionProperty встановлюється на width, а transitionDuration – на 2s. Це означає, що при зміні ширини елемента перехід займе 2 секунди. Коли встановлюється нова ширина (300px), зміна відбувається плавно протягом 2 секунд.

transitionDuration також може бути використана для кількох властивостей одночасно. Якщо ви хочете анімувати декілька властивостей з різною тривалістю, їх можна вказати через кому:

const element = document.getElementById('box');
element.style.transitionProperty = 'width, height';
element.style.transitionDuration = '2s, 1s';
element.style.width = '300px';
element.style.height = '200px';

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

Важливо пам'ятати, що transitionDuration працює лише разом з іншими властивостями переходу, такими як transitionProperty, transitionTimingFunction і transitionDelay. Без встановлення властивості transitionProperty тривалість переходу не матиме ефекту, оскільки браузер не знатиме, які властивості анімувати.

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

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

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

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

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

Синтаксис

element.style.transitionDuration

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

const element = document.getElementById('box');
element.style.transitionProperty = 'width, height';
element.style.transitionDuration = '1s, 3s';
element.style.transitionTimingFunction = 'ease-in-out';

element.addEventListener('click', () => {
    element.style.width = '400px';
    element.style.height = '200px';
});

const element = document.getElementById('box');
element.style.transitionProperty = 'background-color, transform';
element.style.transitionDuration = '2s, 0.5s';
element.style.transitionTimingFunction = 'linear, ease-out';

element.addEventListener('mouseover', () => {
    element.style.backgroundColor = 'blue';
    element.style.transform = 'scale(1.5)';
});

element.addEventListener('mouseout', () => {
    element.style.backgroundColor = 'red';
    element.style.transform = 'scale(1)';
});