overlay

Syntax

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

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

Werte

auto

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

none

Das Element wird nicht in der obersten Ebene 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 übergeht.

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 seinem 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 zu übergehenden Eigenschaften vorhanden. Da overlay eine vom Benutzeragent kontrollierte Eigenschaft ist, wird sie nicht in den Vor- und Nach-Übergangszuständen angegeben.

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 standardmäßig versteckten Zustand des Popover-Elements (ausgewählt über [popover]) und einen Endzustand im geöffneten Zustand des Popovers (ausgewählt über die :popover-open-Pseudoklasse). Wir setzen dann eine transition-Eigenschaft, um zwischen den beiden zu animieren.

Da das animierte Element beim Anzeigen in die oberste Ebene befördert und beim Verbergen aus der obersten Ebene entfernt wird, wird overlay der Liste der zu übergehenden Elemente hinzugefügt. Dies stellt sicher, dass die Entfernung des Elements aus der obersten Ebene aufgeschoben wird, bis die Animation beendet ist. Dies macht keinen großen Unterschied bei grundlegenden Animationen wie dieser, aber in komplexeren Fällen kann das Fehlen dieser Einstellung 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 Shorthand gesetzt ist, um diskrete Übergänge zu ermöglichen.

Die folgenden Schritte sind ebenfalls erforderlich, um die Animation in beide Richtungen funktionsfähig zu machen:

• Ein Anfangszustand für die Animation wird innerhalb der @starting-style-At-Regel festgelegt. 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 zu einem anderen Typ ändert. @starting-style ermöglicht es Ihnen, diese Standardeinstellung auf spezifische Weise zu überschreiben. Ohne dies würde die Eintrittsanimation nicht auftreten und das Popover würde einfach erscheinen.
• display wird auch zur Liste der zu übergehenden Elemente hinzugefügt, sodass das animierte Element während sowohl der Eingangs- als auch der Ausgangsanimation sichtbar ist (auf display: block gesetzt). Ohne dies wäre die Ausgangsanimation nicht sichtbar; tatsächlich würde das Popover einfach verschwinden. Auch hier ist transition-behavior: allow-discrete notwendig, damit die Animation stattfindet.

Sie werden feststellen, dass wir auch einen Übergang auf dem ::backdrop eingeschlossen haben, der hinter dem Popover erscheint, wenn es geöffnet wird, um eine angenehme Verdunkelungsanimation zu bieten. [popover]:popover-open::backdrop ist erforderlich, 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-Funktionen für sanfte Ein- und Ausstieganimationen auf developer.chrome.com (2023)