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`. Використання цих властивостей може значно покращити плавність анімацій і знизити навантаження на процесор.
Порада:	Застосовуйте затримку для створення послідовних анімацій. Замість того, щоб запускати всі анімації одночасно, використовуйте параметр затримки для створення каскадного ефекту. Це дозволить вам краще координувати різні анімації на сторінці, що виглядає більш професійно і привабливо.
Порада:	Щоб уникнути помилок з багатьма властивостями, не забудьте додати перехід для всіх властивостей, які можуть змінюватися. Якщо ви плануєте змінювати кілька властивостей, таких як `width`, `height` і `background-color`, переконайтеся, що всі вони включені в `transition`. Це допоможе уникнути ситуацій, коли частина анімацій буде працювати некоректно або взагалі не спрацює.

Синтаксис

element.style.transition

Значення

Return

Переглядачі

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

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

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

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/yLdbMKY">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

Цей приклад демонструє, як можна реалізувати плавне розгортання та згортання панелі. Коли користувач натискає на кнопку, висота панелі змінюється з 0px до 200px і назад, що створює ефект розгортання та згортання. Це корисно для створення інтерактивних інтерфейсів, де потрібно економити місце і показувати додаткову інформацію за запитом.

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';
    }
});

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

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';
});

JS довідник

JavaScript

Наповнення JS розділу