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 von verborgen zu sichtbar übergeht und wieder zurück.

HTML

Das HTML enthält ein <div> Element, das als Popover mittels des popover Attributs deklariert ist, und ein <button> Element, das als Anzeige-Steuerung 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 animierten Eigenschaften vorhanden. Da overlay eine vom Benutzer-Agenten kontrollierte Eigenschaft ist, wird sie nicht in den Vor-Übergangs- oder Nach-Übergangszuständen deklariert.

html {
  font-family: Arial, Helvetica, 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 aus- und einblendet, während es in horizontaler Richtung wächst und schrumpft. Wir setzen einen Anfangszustand für diese Eigenschaften auf den standardmäßig verborgenen Zustand des Popover-Elements (ausgewählt über [popover]) und einen Endzustand auf den offenen 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 in die oberste Ebene gefördert wird, wenn es angezeigt wird, und aus der obersten Ebene entfernt wird, wenn es verborgen ist, wird overlay zur Liste der animierten Elemente hinzugefügt. Dies stellt sicher, dass die Entfernung des Elements aus der obersten Ebene verschoben wird, bis die Animation abgeschlossen ist. Das macht bei grundlegenden Animationen wie dieser keinen großen Unterschied, aber in komplizierteren Fällen kann dies 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 der Wert transition-behavior: allow-discrete ebenfalls 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 ist innerhalb der @starting-style at-rule festgelegt. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden Übergänge bei den ersten Stilaktualisierungen eines Elements oder wenn sich der display-Typ von none zu einem anderen Typ ändert, nicht ausgelöst. @starting-style ermöglicht es Ihnen, diesen Standard auf eine spezifische kontrollierte Weise zu überschreiben. Ohne dies würde die Eintrittsanimation nicht auftreten und das Popover würde einfach erscheinen.
• display wird auch zur Liste der animierten Elemente hinzugefügt, sodass das animierte Element während sowohl der Ein- 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 stattfinden kann.

Sie werden feststellen, dass wir auch einen Übergang auf dem ::backdrop hinzugefügt haben, der hinter dem Popover erscheint, wenn es geöffnet wird, um eine nette Verdunkelungsanimation zu bieten. [popover]:popover-open::backdrop ist erforderlich, um den Backdrop zu wählen, wenn das Popover geöffnet ist.

Ergebnis

Der Code wird wie folgt gerendert:

Spezifikationen

Browser-Kompatibilität

Siehe auch

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