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

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

element.style.transitionProperty – це властивість, яка дозволяє вказати, які CSS-властивості повинні анімуватися під час переходу. Ця властивість є частиною CSS Transition Properties і використовується для контролю анімації змін CSS-властивостей.

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

const element = document.getElementById('myElement');
element.style.transitionProperty = 'width, height';

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

element.style.transitionDuration = '2s';
element.style.transitionTimingFunction = 'ease-in-out';

Тепер, коли ви зміните ширину або висоту елемента, зміни будуть відбуватися плавно протягом 2 секунд:

element.style.width = '300px';
element.style.height = '200px';

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

element.style.transitionProperty = 'background-color, width, height';
element.style.transitionDuration = '1s, 2s, 2s';
element.style.transitionTimingFunction = 'ease-in, linear, ease-out';
element.style.backgroundColor = 'blue';
element.style.width = '300px';
element.style.height = '200px';

У цьому випадку зміна кольору фону відбуватиметься протягом 1 секунди з ефектом "ease-in", зміна ширини – протягом 2 секунд з лінійним ефектом, а зміна висоти – протягом 2 секунд з ефектом "ease-out".

Властивість transitionProperty також підтримує значення all, що дозволяє анімувати всі змінені CSS-властивості. Наприклад:

element.style.transitionProperty = 'all';
element.style.transitionDuration = '2s';
element.style.width = '300px';
element.style.height = '200px';
element.style.backgroundColor = 'blue';

Це означає, що будь-яка змінена властивість CSS буде анімована з заданими параметрами переходу.

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

Порада:	Пам'ятайте, що `transitionProperty` може бути використано для анімації псевдоелементів, таких як `::before` і `::after`. Це дозволяє створювати цікаві ефекти, наприклад, анімацію контурів або декоративних елементів на сторінці, що додає естетичності та візуальної привабливості.
Порада:	Застосовуйте `transitionProperty` для анімації властивостей, які змінюються динамічно, наприклад, при оновленні контенту або зміні розміру вікна. Це допоможе зробити зміни менш різкими і більш приємними для користувача, що сприяє покращенню загального користувацького досвіду.
Порада:	Використовуйте `transitionProperty` разом з JavaScript подіями для створення інтерактивних ефектів. Наприклад, анімація змін стилів при натисканні кнопки або при наведенні курсору на елемент робить взаємодію з користувачем більш привабливою та динамічною.

Синтаксис

element.style.transitionProperty

Значення

Return

Переглядачі

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

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

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

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/poXPeVj">
  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>.

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

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

element.addEventListener('click', () => {
    element.style.width = '300px';
    element.style.height = '300px';
    element.style.backgroundColor = 'blue';
});

У цьому прикладі ми реалізуємо плавну анімацію зміни обрисів елемента при наведенні курсору. Встановлюючи transitionProperty, ми визначаємо, що властивості border-radius і border-color будуть анімуватися з різною тривалістю і таймінг-функціями. Це дозволяє створювати ефектні анімації, що реагують на дії користувача, покращуючи загальний досвід взаємодії з веб-сторінкою.

const element = document.getElementById('borderBox');
element.style.transitionProperty = 'border-radius, border-color';
element.style.transitionDuration = '1s, 1.5s';
element.style.transitionTimingFunction = 'ease-in-out, ease-in';

element.addEventListener('mouseover', () => {
    element.style.borderRadius = '50%';
    element.style.borderColor = 'red';
});

element.addEventListener('mouseout', () => {
    element.style.borderRadius = '0%';
    element.style.borderColor = 'black';
});

JS довідник

JavaScript

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