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

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

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

Щоб використовувати властивість transition, потрібно вказати декілька параметрів: CSS-властивість, яку слід анімувати, тривалість переходу, функцію таймінгу (ease, linear тощо) та затримку перед початком анімації (необов’язково).

Приклад встановлення переходу:

const element = document.getElementById('myElement');
element.style.transition = 'width 2s ease-in-out';

У цьому прикладі ми встановлюємо перехід для зміни ширини елемента протягом 2 секунд з ефектом "ease-in-out". Це означає, що зміна ширини буде відбуватися поступово, спочатку повільно, потім швидше і знову повільно наприкінці.

Щоб анімація спрацювала, потрібно змінити значення CSS-властивості, яка вказана у transition. Наприклад:

element.style.width = '300px';

При зміні ширини елемента браузер застосує перехід і плавно змінить ширину від поточного значення до 300px за 2 секунди.

Можна анімувати кілька властивостей одночасно. Для цього їх потрібно перерахувати через кому:

element.style.transition = 'width 2s, height 2s, opacity 1s';
element.style.width = '300px';
element.style.height = '200px';
element.style.opacity = '0.5';

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

Додатково, можна використовувати функції таймінгу для створення різних ефектів:

element.style.transition = 'transform 1s cubic-bezier(0.42, 0, 0.58, 1)';
element.style.transform = 'rotate(45deg)';

Функція cubic-bezier дозволяє створювати кастомні криві таймінгу, що дає змогу детальніше контролювати процес анімації.

Також, можна встановити затримку перед початком анімації:

element.style.transition = 'background-color 1s 0.5s ease-in-out';
element.style.backgroundColor = 'blue';

У цьому прикладі анімація зміни кольору фону почнеться через 0.5 секунд після виклику зміни властивості.

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

правити

Порада

Пам'ятайте про ефективність: анімації можуть впливати на продуктивність, особливо на мобільних пристроях. Щоб оптимізувати продуктивність, анімуйте властивості, які можуть бути оброблені на графічному процесорі (GPU), такі як transform і opacity. Використання цих властивостей може значно покращити плавність анімацій і знизити навантаження на процесор.

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

Порада

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

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

Порада

Щоб уникнути помилок з багатьма властивостями, не забудьте додати перехід для всіх властивостей, які можуть змінюватися. Якщо ви плануєте змінювати кілька властивостей, таких як width, height і background-color, переконайтеся, що всі вони включені в transition. Це допоможе уникнути ситуацій, коли частина анімацій буде працювати некоректно або взагалі не спрацює.

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

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

Синтаксис

element.style.transition

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<div id="panel">Демонстраційний елемент</div>
<button id="toggleButton">Перемкнути</button>

const panel = document.getElementById('panel');
const button = document.getElementById('toggleButton');

button.addEventListener('click', () => {
    if (panel.style.height === '0px' || panel.style.height === '') {
        panel.style.transition = 'height 0.5s ease';
        panel.style.height = '200px';
    } else {
        panel.style.transition = 'height 0.5s ease';
        panel.style.height = '0px';
    }
});

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

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

changeColorButton.addEventListener('click', () => {
    box.style.transition = 'background-color 2s ease-in-out 1s';
    box.style.backgroundColor = box.style.backgroundColor === 'blue' ? 'green' : 'blue';
});