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. Це дозволяє створювати цікаві ефекти, наприклад, анімацію контурів або декоративних елементів на сторінці, що додає естетичності та візуальної привабливості.

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

Порада

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

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

Порада

Використовуйте transitionProperty разом з JavaScript подіями для створення інтерактивних ефектів. Наприклад, анімація змін стилів при натисканні кнопки або при наведенні курсору на елемент робить взаємодію з користувачем більш привабливою та динамічною.

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

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

Синтаксис

element.style.transitionProperty

Переглядачі

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

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

Переглядач
	26	16	9	12.1	12	10

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

Переглядач
	4.4	26	16	9

Приклади

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

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

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

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

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

<header>
  <h2 class="title">element.style.transitionProperty</h2>
  <p class="description">Визначає, які CSS-властивості будуть анімовані під час переходу.</p>
</header>
<main>
  <div class="result">
    <div id="box" class="box"></div>
    <form id="controlForm">
      <label>
        <input type="checkbox" id="animateWidth" name="animateWidth">
        Анімувати ширину
      </label>
      <label>
        <input type="checkbox" id="animateHeight" name="animateHeight">
        Анімувати висоту
      </label>
      <label>
        <input type="checkbox" id="animateColor" name="animateColor">
        Анімувати колір фону
      </label>
      
      <label for="width">Нова ширина (px):</label>
      <input type="number" id="width" name="width" value="300">
      
      <label for="height">Нова висота (px):</label>
      <input type="number" id="height" name="height" value="300">
      
      <label for="color">Новий колір фону:</label>
      <input type="color" id="color" name="color" value="#00ff00">
      
      <button type="button" id="applyChanges">Застосувати зміни</button>
    </form>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  margin-bottom: 20px;
}

form {
  display: flex;
  flex-direction: column;
}

label {
  margin: 5px 0;
}

input[type="number"],
input[type="color"] {
  margin-bottom: 10px;
  padding: 5px;
  font-size: 14px;
}

button {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}

const box = document.getElementById('box');
const form = document.getElementById('controlForm');
const applyChangesButton = document.getElementById('applyChanges');

applyChangesButton.addEventListener('click', () => {
  const animateWidth = form.animateWidth.checked;
  const animateHeight = form.animateHeight.checked;
  const animateColor = form.animateColor.checked;

  const newWidth = form.width.value + 'px';
  const newHeight = form.height.value + 'px';
  const newColor = form.color.value;

  let transitionProperties = [];
  if (animateWidth) transitionProperties.push('width');
  if (animateHeight) transitionProperties.push('height');
  if (animateColor) transitionProperties.push('background-color');

  box.style.transitionProperty = transitionProperties.join(', ');
  box.style.transitionDuration = '2s';

  if (animateWidth) box.style.width = newWidth;
  if (animateHeight) box.style.height = newHeight;
  if (animateColor) box.style.backgroundColor = newColor;
});
//# sourceURL=pen.js