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 versetzt wird.

none

Das Element wird nicht in der Top-Schicht gerendert.

Formale Definition

Formale Syntax

overlay = 
  none  |
  auto  

Beispiele

Übergang eines Popovers

In diesem Beispiel wird ein Popover animiert, während es von unsichtbar zu sichtbar und wieder zurück wechselt.

HTML

Das HTML enthält ein <div> Element, das als Popover mit dem popover Attribut deklariert wurde, und ein <button> Element, das als Anzeige-Steuerung des Popovers mit seinem popovertarget Attribut bestimmt wurde.

<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 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 horizontaler Richtung wächst und schrumpft. Wir setzen einen Anfangszustand für diese Eigenschaften auf den standardmäßig versteckten Zustand des Popover-Elements (ausgewählt über [popover]) und einen Endzustand auf den offenen Zustand des Popovers (ausgewählt über die :popover-open Pseudo-Klasse). Wir setzen dann eine transition Eigenschaft, um zwischen den beiden zu animieren.

Da das animierte Element beim Anzeigen in die Top-Schicht aufgenommen und beim Verbergen aus der Top-Schicht entfernt wird, wird overlay der Liste der übergangenen Elemente hinzugefügt. Dies stellt sicher, dass die Entfernung des Elements aus der Top-Schicht verzögert wird, bis die Animation beendet ist. Dies macht keinen großen Unterschied bei einfachen Animationen wie dieser, 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 glatt oder effektiv ist. Beachten Sie, dass der Wert transition-behavior: allow-discrete auch in der Kurzform gesetzt wird, 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 At-Regel gesetzt. Dies ist erforderlich, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden Übergänge nicht bei den ersten Stilaktualisierungen von Elementen oder wenn sich der display Typ von none in einen anderen Typ ändert, ausgelöst. @starting-style ermöglicht es Ihnen, diesen Standard auf eine spezifische, kontrollierte Art zu überschreiben. Ohne dies würde die Eintrittsanimation nicht stattfinden und das Popover würde einfach erscheinen.
• display wird auch der Liste der übergangenen Elemente hinzugefügt, sodass das animierte Element während der Ein- und 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 enthalten haben, der hinter dem Popover erscheint, wenn es geöffnet wird, um eine schöne Verdunkelungsanimation zu bieten. [popover]:popover-open::backdrop wird benötigt, um das Backdrop auszuwählen, wenn das Popover geöffnet ist.

Ergebnis

Der Code wird wie folgt dargestellt:

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS Transitions Modul
• @starting-style
• transition-behavior
• Vier neue CSS-Features für sanfte Eintritts- und Austrittsanimationen auf developer.chrome.com (2023)