overlay CSS property

Syntax

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

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

Werte

auto

Das Element wird in der obersten Schicht gerendert, wenn es in die oberste Schicht befördert wird.

none

Das Element wird nicht in der obersten Schicht gerendert.

Formale Definition

Formale Syntax

overlay = 
  none  |
  auto  

Beispiele

Übergang eines Popovers

In diesem Beispiel wird ein Popover animiert, während es von versteckt zu angezeigt übergeht und umgekehrt.

HTML

Das HTML enthält ein <div>-Element, das als Popover mit dem popover-Attribut deklariert ist, und ein <button>-Element, das als Anzeigsteuerelement des Popovers mit seinem popovertarget-Attribut festgelegt ist.

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

CSS

Die overlay-Eigenschaft ist nur in der Liste der übergangenen Eigenschaften vorhanden. Da overlay eine vom Benutzeragenten gesteuerte Eigenschaft ist, wird sie weder im Vorübergangs- noch im Nachübergangszustand deklariert.

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;
  }
}

Die beiden Eigenschaften, die wir animieren möchten, sind opacity und transform: wir möchten, dass das Popover ein- und ausgeblendet wird, während es sich in horizontaler Richtung vergrößert und verkleinert. Wir setzen einen Anfangszustand für diese Eigenschaften im Standard-verborgenen Zustand des Popover-Elements (ausgewählt über [popover]) und einen Endzustand im offenen Zustand des Popovers (ausgewählt über die :popover-open Pseudoklasse). Dann setzen wir eine transition-Eigenschaft, um zwischen den beiden zu animieren.

Da das animierte Element in die oberste Schicht befördert wird, wenn es angezeigt wird, und aus der obersten Schicht entfernt wird, wenn es verborgen ist, wird overlay in die Liste der übergangenen Elemente aufgenommen. Dies stellt sicher, dass das Entfernen des Elements aus der obersten Schicht verzögert wird, bis die Animation beendet ist. Dies macht bei einfachen Animationen wie dieser nicht viel aus, aber in komplexeren Fällen kann es passieren, dass das Element ohne dieses schnell aus dem Overlay entfernt wird, was bedeutet, dass die Animation nicht reibungslos oder effektiv ist. Beachten Sie, dass der Wert transition-behavior: allow-discrete ebenfalls in der Kurzform gesetzt ist, um diskrete Übergänge zu ermöglichen.

Die folgenden Schritte sind ebenfalls erforderlich, um die Animation in beide Richtungen zum Laufen zu bringen:

• Ein Anfangszustand für die Animation wird innerhalb der @starting-style-Regel festgelegt. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden Übergänge bei den ersten Stilaktualisierungen von Elementen oder wenn sich der display-Typ von none zu einem anderen Typ ändert, nicht ausgelöst. @starting-style ermöglicht es Ihnen, diesen Standard in einer bestimmten kontrollierten Weise zu überschreiben. Ohne dies würde die Eintrittsanimation nicht stattfinden und das Popover einfach erscheinen.
• display wird ebenfalls zur Liste der übergangenen Elemente hinzugefügt, sodass das animierte Element während sowohl der Eintritts- als auch der Austrittsanimation sichtbar ist (auf display: block gesetzt). Ohne dies wäre die Austrittsanimation nicht sichtbar; in der Praxis würde das Popover einfach verschwinden. Auch hier ist transition-behavior: allow-discrete erforderlich, damit die Animation stattfindet.

Sie werden feststellen, dass wir auch einen Übergang auf dem ::backdrop, das hinter dem Popover erscheint, wenn es geöffnet wird, für eine schöne Abdunklungsanimation enthalten haben. [popover]:popover-open::backdrop ist erforderlich, um das Backdrop zu wählen, wenn das Popover offen ist.

Ergebnis

Der Code wird wie folgt dargestellt:

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS-Übergänge-Modul
• @starting-style
• transition-behavior
• Vier neue CSS-Funktionen für glatte Ein- und Austrittsanimationen auf developer.chrome.com (2023)