CSS-свойство `overlay`

Свойство overlay CSS задаёт, действительно ли элемент, находящийся в верхнем слое (например, отображаемый всплывающий элемент или модальный элемент <dialog>), отображается в верхнем слое. Это свойство имеет значение только в списке значений transition-property и только если allow-discrete задано как transition-behavior.

Важно отметить, что overlay может задаваться только браузером — авторские стили не могут изменить значение overlay любого элемента. Однако вы можете добавить overlay в список свойств перехода, заданных для элемента. Благодаря этому удаление элемента из верхнего слоя откладывается, чтобы его можно было анимировать, а не скрывать мгновенно.

Синтаксис

/* Keyword values */
overlay: auto;
overlay: none;

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

Значения

Это свойство задаётся одним из следующих ключевых слов:

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: "Helvetica", "Arial", 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: transparent;
  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: transparent;
  }
}

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

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

Чтобы анимация работала в обоих направлениях, также необходимо выполнить следующие действия:

• Начальное состояние анимации задаётся внутри директивы @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)