Использование свойства transition

Самый простой способ добавить визуально плавную смену состояний в веб-компоненты UI - это использовать CSS-переходы.

Свойство CSS transition позволяет определить переход между двумя состояниями элемента за определенный промежуток времени.

Свойство задается в виде одного или нескольких односвойственных переходов, разделенных запятыми ( , ). В полной нотации для одного односвойственного перехода это выглядит следующим образом:

transition: <property name> <duration> <easing function> <delay>;

Если вы не укажете значение <property name>, переход будет применен для всех свойств элемента, на которые он может повлиять.

Само свойство является сокращением для набора отдельных CSS-свойств, которые могут использоваться в любой комбинации:

transition-delay

Определяет время ожидания перед началом эффекта перехода свойства при изменении его значения.

При отрицательном значении эффект перехода начнется немедленно, но частично, как если бы он уже был анимирован до этого момента времени.

transition-duration

Определяет продолжительность анимации перехода.

transition-property

Указывает CSS-свойства , к которым должен быть применен эффект перехода.

transition-timing-function

Позволяет задать функцию смягчения для создания кривой ускорения, чтобы скорость перехода менялась в зависимости от его длительности.

Значения времени задаются в секундах ( s ) или миллисекундах ( ms ).

Применение CSS-переходов к компоненту

Предположим, что вы хотите увеличить масштаб, скажем, компонента Таймер, на который наведен курсор, изменив некоторые его стили и добавив дополнительную информацию.

  1. В UI Builder добавьте компонент на инструментальную панель, щелкнув его в Палитре компонентов или перетащив на макет.

  2. Откройте Редактор свойств, наведя курсор на компонент на макете и нажав кнопку Настроить () в правом верхнем углу появившегося оверлея, или выбрав его в Дереве компонентов.

  3. В Редакторе свойств переключитесь на вкладку Стиль элемента.

  1. На вкладке Стиль элемента добавьте к свойству Стиль CSS элемента несколько базовых стилей плюс правило для состояния наведения с помощью псевдокласса :hover :

text-align: center;
width: fit-content;
margin: auto;
padding: 24px 16px;
border-radius: 8px;
transform-origin: center center;

:hover {
  transform: scale(3);
  color: firebrick;
  font-weight: 800;
  background-color: white;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16);
}

  1. В том же свойстве добавьте пару пока скрытых псевдоэлементов, чтобы показывать их только на компоненте с увеличенным масштабом. Также добавьте еще пару общих стилей компонентов для поддержки их позиционирования:

position: relative;
display: flex;
justify-content: center;

::before, ::after {
  position: absolute;
  opacity: 0;
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
}

::before {
  content: "it's the final";
  top: 12px;
}

::after {
  content: "countdown";
  bottom: 12px;
}

:hover::before, :hover::after {
  color: black;
  opacity: 1;
}

  1. Теперь проверьте получившееся взаимодействие на инструментальной панели.

  1. Взаимодействие работает, как и предполагалось, но оно происходит мгновенно, и создается впечатление, что поверх исходного компонента появился еще один. Чтобы это исправить, используйте свойства transition в написанных стилях. В результате CSS должен выглядеть следующим образом:

position: relative;
display: flex;
justify-content: center;
text-align: center;
width: fit-content;
margin: auto;
padding: 24px 16px;
border-radius: 8px;
transform-origin: center center;
transition: 0.24s;  /* настройка времени перехода для компонента */

:hover {
  transform: scale(3.0);
  color: firebrick;
  font-weight: 800;
  background-color: white;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16);
}

::before, ::after {
  position: absolute;
  opacity: 0;
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  transition: 0.24s;  /* настройка времени перехода для псевдоэлементов */
}

::before {
  content: "it's the final";
  top: 24px; /* поместите элемент за пределы конечной позиции, чтобы он задвигался, когда происходит анимация */
}

::after {
  content: "countdown";
  bottom: 24px;  /* поместите элемент в конечное положение, чтобы он задвигался при анимации */
}

:hover::before, :hover::after {
  color: black;
  opacity: 1;
  transition-timing-function: ease-in;  /* заставляет анимацию ускоряться к концу */
}

:hover::before { 
    transition-delay: 0.64s;  /* делает так, чтобы первая строка появилась позже */
    top: 12px;  /* перемещает элемент в конечную позицию */
}

:hover::after { 
    transition-delay: 1.2s; /* делает так, чтобы вторая строка появилась еще позже */
    bottom: 12px;  /* перемещает элемент в конечную позицию */
}

  1. Проверьте изменения на инструментальной панели и оцените разницу между начальным и конечным результатом.