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 Top-Schicht gerendert, wenn es in die Top-Schicht befördert wird.

none

Das Element wird nicht in der Top-Schicht gerendert.

Formaldefinition

Formale Syntax

overlay = 
  none  |
  auto  

Beispiele

Übergang eines Popovers

In diesem Beispiel wird ein Popover animiert, während es aus einem versteckten in einen angezeigten Zustand übergeht und wieder zurück.

HTML

Das HTML enthält ein <div>-Element, das als Popover mit dem popover-Attribut deklariert ist, und ein <button>-Element, das als Steuerung für die Anzeige des Popovers über sein 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 Übergangseigenschaften vorhanden. Da overlay eine benutzeragentengesteuerte Eigenschaft ist, wird sie nicht in den Vor-Übergangs- 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 horizontaler Richtung wächst und schrumpft. Wir setzen einen Anfangszustand für diese Eigenschaften im Standard-versteckten 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 Top-Schicht befördert wird, wenn es angezeigt wird, und aus der Top-Schicht entfernt wird, wenn es versteckt ist, wird overlay der Liste der Übergangselemente hinzugefügt. Das stellt sicher, dass das Entfernen des Elements aus der Top-Schicht verzögert wird, bis die Animation beendet ist. Dies macht bei einfachen Animationen wie dieser keinen großen Unterschied, aber in komplexeren Fällen kann es dazu führen, dass das Element zu schnell aus dem Overlay entfernt wird, was bedeutet, dass die Animation nicht flüssig oder effektiv ist. Beachten Sie, dass auch der Wert transition-behavior: allow-discrete im Kürzel gesetzt wird, um diskrete Übergänge zu ermöglichen.

Um die Animation in beide Richtungen zum Laufen zu bringen, sind die folgenden Schritte erforderlich:

• Ein Anfangszustand für die Animation wird innerhalb der @starting-style-At-Regel gesetzt. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden Übergänge nicht bei den ersten Stilaktualisierungen von Elementen ausgelöst oder wenn sich der display-Typ von none auf einen anderen Typ ändert. @starting-style ermöglicht es Ihnen, diesen Standard auf eine spezifische kontrollierte Weise zu überschreiben. Ohne dies würde die Eintrittsanimation nicht stattfinden und das Popover würde einfach erscheinen.
• display wird ebenfalls der Liste der Übergangselemente hinzugefügt, damit 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; tatsächlich 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 enthalten haben, der hinter dem Popover erscheint, wenn es sich öffnet, um eine schöne Verdunkelungsanimation zu liefern. [popover]:popover-open::backdrop ist erforderlich, um das Backdrop auszuwählen, wenn das Popover geöffnet ist.

Ergebnis

Der Code rendert sich wie folgt:

Spezifikationen

Browser-Kompatibilität

Siehe auch

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