Свойство CSS `transition-behavior`

Свойство transition-behavior CSS указывает, будут ли запускаться переходы для свойств, поведение анимации которых является дискретным.

Синтаксис

/* Keyword values */
transition-behavior: allow-discrete;
transition-behavior: normal;

/* Global values */
transition-behavior: inherit;
transition-behavior: initial;
transition-behavior: revert;
transition-behavior: revert-layer;
transition-behavior: unset;

Значения

allow-discrete

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

normal

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

Описание

Свойство transition-behavior имеет значение только при использовании вместе с другими свойствами переходов, в частности transition-property и transition-duration, поскольку переход не происходит, если никакие свойства не анимируются в течение ненулевого промежутка времени.

.card {
  transition-property: opacity, display;
  transition-duration: 0.25s;
  transition-behavior: allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

Значение transition-behavior можно включить в сокращённую запись transition. При использовании в сокращённой записи, если применяются все свойства или значение по умолчанию, значение allow-discrete не влияет на обычные анимируемые свойства. Следующий CSS-код эквивалентен приведённым выше объявлениям полных свойств:

.card {
  transition: all 0.25s;
  transition: all 0.25s allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

В приведённом выше фрагменте мы дважды указываем свойство transition. В первом случае значение allow-discrete не указано — это обеспечивает поддержку в разных браузерах, гарантируя, что другие свойства карточки по-прежнему будут переходить в браузерах, которые не поддерживают transition-behavior.

Поведение дискретной анимации

Значения свойств с дискретной анимацией обычно переключаются между двумя значениями на отметке 50% анимации.

Однако есть исключение: переход к display: none или от него, а также к content-visibility: hidden или от него. В этом случае браузер переключается между двумя значениями так, чтобы содержимое, участвующее в переходе, отображалось в течение всей анимации.

Например:

• При анимации display от none к block (или другому видимому значению display) значение переключится на block в момент 0% длительности анимации, чтобы элемент оставался видимым на протяжении всей анимации.
• При анимации display от block (или другого видимого значения display) к none значение переключится на none в момент 100% длительности анимации, чтобы элемент оставался видимым на протяжении всей анимации.

Формальное определение

Формальный синтаксис

transition-behavior = 
  <transition-behavior-value>#

<transition-behavior-value> = 
  normal |
  allow-discrete

Примеры

Переход для всплывающей подсказки

В этом примере всплывающая подсказка анимируется при переходе из скрытого состояния в отображаемое и обратно.

HTML

HTML содержит элемент <div>, объявленный как всплывающая подсказка с помощью атрибута popover, и элемент <button>, назначенный элементом управления отображением подсказки с помощью атрибута popovertarget.

<button popovertarget="mypopover">Show the popover</button>
<div popover="auto" id="mypopover">I'm a Popover! I should animate.</div>

CSS

html {
  font-family: "Helvetica", "Arial", sans-serif;
}

[popover] {
  font-size: 1.2rem;
  padding: 10px;
}

[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);
}

[popover] {
  /* Final state of the exit animation */
  opacity: 0;
  transform: scaleX(0);

  transition-property: opacity, transform, overlay, display;
  transition-duration: 0.7s;
  transition-behavior: allow-discrete;
  /* Using the shorthand transition property, we could write:
    transition: 
      opacity 0.7s,
      transform 0.7s,
      overlay 0.7s allow-discrete,
      display 0.7s allow-discrete;

    or even:
    transition: all 0.7s allow-discrete;
  */
}

/* Needs to be included after the previous [popover]:popover-open 
   rule to take effect, as the specificity is the same */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scaleX(0);
  }
}

Мы хотим анимировать два свойства: opacity и transform: подсказка должна плавно появляться и исчезать, одновременно увеличиваясь и уменьшаясь по горизонтали. Мы задаём начальные значения этих свойств для состояния по умолчанию, в котором элемент подсказки скрыт (выбирается с помощью [popover]), и конечные значения для открытого состояния подсказки (выбирается с помощью псевдокласса :popover-open). Затем мы задаём свойство transition, чтобы анимировать переход между этими состояниями.

Поскольку при отображении анимированный элемент перемещается на верхний слой, а при скрытии удаляется с него — а это также означает, что для его скрытого состояния задано display: none, — в список переходящих элементов добавляются следующие свойства, чтобы анимация работала в обоих направлениях. В обоих случаях в сокращённой записи задаётся transition-behavior: allow-discrete, чтобы включить дискретную анимацию.

• display: необходимо, чтобы анимированный элемент был виден (значение — display: block) на протяжении анимации появления и исчезновения. Без этого анимация исчезновения не будет видна; фактически подсказка просто исчезнет.
• overlay: необходимо, чтобы удаление элемента с верхнего слоя откладывалось до завершения анимации. Для таких простых анимаций это не имеет большого значения, но в более сложных случаях без этого элемент может быть слишком быстро удалён с верхнего слоя, из-за чего анимация будет выглядеть резкой или неэффективной.

Кроме того, начальное состояние анимации задаётся внутри директивы @starting-style. Это необходимо, чтобы избежать неожиданного поведения. По умолчанию переходы не запускаются при первом обновлении стилей элементов или при изменении типа display с none на другой тип. @starting-style позволяет переопределить это поведение по умолчанию контролируемым способом. Без этого анимация появления не запустится, и подсказка просто появится.

Результат

Код отображается следующим образом:

Спецификации

Совместимость с браузерами

См. также

• overlay
• @starting-style
• модуль CSS-переходы
• Четыре новые возможности CSS для плавной анимации появления и исчезновения на developer.chrome.com (2023)