overlay

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 zu dieser 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 vom versteckten zum angezeigten Zustand und zurück wechselt.

HTML

Das HTML enthält ein <div>-Element, das als Popover mit dem popover-Attribut deklariert ist, und ein <button>-Element, das als Anzeige-Steuerung des Popovers mit dem popovertarget-Attribut bezeichnet 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 Übergangseigenschaften vorhanden. Da overlay eine vom Benutzeragenten kontrollierte Eigenschaft ist, wird sie nicht in den Vor- oder Nachübergangszuständen 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 ausblendet, während es in der horizontalen Richtung wächst und schrumpft. Wir setzen einen Ausgangszustand für diese Eigenschaften im Standardausblendezustand des Popovers (ausgewählt über [popover]) und einen Endzustand im geöffneten 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 beim Anzeigen in die oberste Schicht befördert und beim Verbergen aus der obersten Schicht entfernt wird, wird overlay zur Liste der Übergangselemente hinzugefügt. Dies stellt sicher, dass das Entfernen des Elements aus der obersten Schicht aufgeschoben wird, bis die Animation beendet ist. Dies macht bei einfachen Animationen wie dieser nicht viel Unterschied, aber in komplexeren Fällen kann das Element zu schnell aus der Überlagerung entfernt werden, was bedeutet, dass die Animation nicht flüssig oder effektiv ist. Beachten Sie, dass der Wert transition-behavior: allow-discrete ebenfalls im shorthand gesetzt wird, um diskrete Übergänge zu ermöglichen.

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

• Ein Ausgangszustand 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 eines Elements oder beim Ändern des display-Typs von none zu einem anderen Typ nicht ausgelöst. @starting-style erlaubt Ihnen, dieses Standardverhalten in kontrollierter Weise zu überschreiben. Ohne dies würde die Eintrittsanimation nicht stattfinden und das Popover würde einfach erscheinen.
• display wird ebenfalls zur Liste der Übergangselemente hinzugefügt, damit das animierte Element während der Ein- und Austrittsanimation sichtbar ist (display: block). Ohne dies wäre die Austrittsanimation nicht sichtbar; das Popover würde 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 enthalten haben, der hinter dem Popover erscheint, wenn es geöffnet wird, um eine schöne Verdunklungsanimation zu bieten. [popover]:popover-open::backdrop wird benötigt, um das Backdrop auszuwählen, wenn das Popover geöffnet ist.

Ergebnis

Der Code rendert wie folgt:

Spezifikationen

Browser-Kompatibilität

Siehe auch

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