transition-behavior

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  

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

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

[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)