overlay

auto

Элемент отображается на верхнем слое, если он поднят на верхний слой.

none

Элемент не отображается на верхнем слое.

overlay = 
  none  |
  auto  

В этом примере поп-ап анимируется при переходе от скрытого к отображаемому и обратно.

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

Свойство overlay присутствует только в списке анимируемых свойств. Поскольку overlay — это свойство, управляемое браузером, оно не объявляется в состояниях до и после перехода.

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

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

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

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

  transition:
    opacity 0.7s,
    transform 0.7s,
    overlay 0.7s allow-discrete,
    display 0.7s allow-discrete;
  /* Equivalent to
  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);
  }
}

/* Transition for the popover's backdrop */

[popover]::backdrop {
  background-color: rgb(0 0 0 / 0%);
  transition:
    display 0.7s allow-discrete,
    overlay 0.7s allow-discrete,
    background-color 0.7s;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

[popover]:popover-open::backdrop {
  background-color: rgb(0 0 0 / 25%);
}

/* Nesting selectors (&) cannot represent pseudo-elements, so this 
   starting-style rule cannot be nested. */

@starting-style {
  [popover]:popover-open::backdrop {
    background-color: rgb(0 0 0 / 0%);
  }
}

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

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

Для работы анимации в обоих направлениях также требуются следующие шаги:

• Начальное состояние анимации задаётся внутри правила @starting-style @starting-style. Это необходимо для предотвращения непредсказуемого поведения. По умолчанию переходы не запускаются при первых обновлениях стиля элементов или при изменении типа display с none на другой тип. @starting-style позволяет переопределить это значение по умолчанию в конкретном контролируемом режиме. Без этого начальная анимация не будет происходить, и поп-ап просто появится.
• display также добавляется в список анимируемых элементов, чтобы анимируемый элемент отображался (установлен в display: block) на протяжении всей анимации входа и выхода. Без этого анимация выхода не была бы видна; по сути, поп-ап просто исчезнет. Опять же, transition-behavior: allow-discrete требуется в этом случае для выполнения анимации.

Вы заметите, что мы также добавили переход для ::backdrop, который появляется позади поп-апа при его открытии, чтобы обеспечить приятную затемнённую анимацию. [popover]:popover-open::backdrop требуется для выбора фона, когда поп-ап открыт.

Результат

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

• Переходы CSS модуль
• @starting-style
• transition-behavior
• Четыре новых CSS-функции для плавных анимаций входа и выхода на developer.chrome.com (2023)