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 Ebene gerendert, wenn es auf 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 versteckt zu angezeigt wechselt und zurück.

HTML

Das HTML enthält ein <div>-Element, das mithilfe des [Popover]-Attributs(/de/docs/Web/HTML/Reference/Global_attributes/popover) als Popover deklariert ist, und ein <button>-Element, das mithilfe seines popovertarget-Attributs als Anzeige-Steuerelement des Popovers 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 übergangenen Eigenschaften vorhanden. Da overlay eine von Benutzeragenten gesteuerte Eigenschaft ist, wird sie nicht in den Zuständen vor oder nach dem Übergang 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 Standardzustand des versteckten 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 der obersten Ebene befördert wird, wenn es gezeigt wird, und aus der obersten Ebene entfernt wird, wenn es versteckt wird, wird overlay zur Liste der übergangenen Elemente hinzugefügt. Dies stellt sicher, dass die Entfernung des Elements aus der obersten Ebene bis zum Ende der Animation verzögert wird. Dies macht keinen großen Unterschied bei einfachen Animationen wie dieser hier, aber in komplexeren Fällen kann das Unterlassen zu einer zu schnellen Entfernung aus der obersten Ebene führen, was bedeutet, dass die Animation nicht flüssig oder effektiv ist. Beachten Sie, dass der Wert transition-behavior: allow-discrete auch im Kurzschriftformat festgelegt ist, um diskrete Übergänge zu ermöglichen.

Die folgenden Schritte sind ebenfalls erforderlich, um die Animation in beide Richtungen funktionieren zu lassen:

• Ein Anfangszustand für die Animation wird innerhalb der @starting-style-Regel festgelegt. Dies wird benötigt, 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 in einen anderen Typ ändert. @starting-style ermöglicht es Ihnen, diesen Standard auf spezifische kontrollierte Weise zu überschreiben. Ohne dies würde die Eingangsanimation nicht auftreten und das Popover würde einfach erscheinen.
• display wird ebenfalls zur Liste der übergangenen Elemente hinzugefügt, damit das animierte Element während der Ein- und Ausgangsanimationen sichtbar ist (auf display: block gesetzt). Ohne dies wäre die Ausgangsanimation 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 bemerken, dass wir auch einen Übergang auf dem ::backdrop eingefügt 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 Hintergrundbild auszuwä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 Ausgangsanimationen auf developer.chrome.com (2023)