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

none

Das Element wird nicht in der obersten Schicht gerendert.

Formale Definition

Formale Syntax

overlay = 
  none  |
  auto  

Beispiele

Überblendung 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 mit dem popover Attribut deklariert ist, und ein <button>-Element, das als Anzeige-Steuerung des Popovers durch sein popovertarget Attribut ausgewiesen 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 vom Benutzer-Agenten gesteuerte 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 wollen, sind opacity und transform: wir möchten, dass das Popover ein- und ausgeblendet wird, während es in horizontaler Richtung wächst und schrumpft. Wir setzen einen Anfangszustand für diese Eigenschaften im Standard-verborgenen 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 Schicht gefördert und beim Verbergen aus der obersten Schicht entfernt wird, wird overlay zur Liste der übergangenen Elemente hinzugefügt. Dies stellt sicher, dass die Entfernung des Elements aus der obersten Schicht bis zum Ende der Animation aufgeschoben wird. Dies macht keinen großen Unterschied bei grundlegenden Animationen wie dieser, aber in komplexeren Fällen kann das Entfernen des Elements aus der Überlagerung zu schnell geschehen, wenn dies nicht getan wird, wodurch die Animation nicht glatt oder effektiv ist. Beachten Sie, dass auch der Wert transition-behavior: allow-discrete in der Kurzform gesetzt wird, 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 at-rule gesetzt. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden Übergänge bei den ersten Stilaktualisierungen von Elementen oder beim Wechsel des display-Typs von none zu einem anderen Typ 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 erfolgen und das Popover würde einfach erscheinen.
• display wird auch zur Liste der übergangenen Elemente hinzugefügt, sodass 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; effektiv würde das Popover einfach verschwinden. Auch hier ist transition-behavior: allow-discrete erforderlich, damit die Animation erfolgt.

Es wird bemerkt, dass wir auch einen Übergang auf dem ::backdrop enthalten haben, der hinter dem Popover erscheint, wenn es sich öffnet, um eine schöne Abdunklungsanimation zu bieten. [popover]:popover-open::backdrop ist notwendig, um das Backdrop auszuwählen, wenn das Popover geöffnet ist.

Ergebnis

Der Code wird wie folgt gerendert:

Spezifikationen

Browser-Kompatibilität

Siehe auch

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