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 befördert wird.

none

Das Element wird nicht in der obersten Schicht gerendert.

Formale Definition

Formale Syntax

overlay = 
  none  |
  auto  

Beispiele

Übergang eines Popovers

In diesem Beispiel wird ein Popover animiert, wenn es von versteckt zu angezeigt wechselt und umgekehrt.

HTML

Das HTML enthält ein <div> Element, das mit dem popover Attribut als Popover deklariert wurde, und ein <button> Element, das mit seinem popovertarget Attribut als Anzeigekontrolle des Popovers bezeichnet wird.

<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-Agent gesteuerte Eigenschaft ist, wird sie nicht in den Vor-Übergangs- 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 im Standard-verborgenen Zustand des Popover-Elements (ausgewählt über [popover]) und einen Endzustand im 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 Schicht befördert wird, wenn es angezeigt wird, und aus der obersten Schicht 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 Schicht verzögert wird, bis die Animation beendet ist. Dies macht keinen großen Unterschied für grundlegende Animationen wie diese, aber in komplexeren Fällen kann das Element zu schnell aus dem Overlay entfernt werden, was bedeutet, dass die Animation nicht glatt oder effektiv ist. Beachten Sie, dass der Wert transition-behavior: allow-discrete im Shorthand ebenfalls gesetzt ist, um diskrete Übergänge zu ermöglichen.

Folgende Schritte sind ebenfalls erforderlich, um die Animation in beiden Richtungen zum Laufen zu bringen:

• Ein Anfangszustand für die Animation wird innerhalb der @starting-style At-Regel gesetzt. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden Übergänge nicht bei den ersten Stilaktualisierungen von Elementen ausgelöst oder wenn der display-Typ von none auf einen anderen Typ wechselt. @starting-style ermöglicht es Ihnen, diesen Standard auf spezifische kontrollierte Weise zu überschreiben. Ohne dies würde die Eintrittsanimation 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 Austrittsanimation sichtbar ist (auf display: block gesetzt). Ohne dies würde die Austrittsanimation nicht sichtbar sein; in der Tat würde das Popover einfach verschwinden. Auch hier ist transition-behavior: allow-discrete in diesem Fall erforderlich, damit die Animation erfolgt.

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 Verdunklungsanimation bereitzustellen. [popover]:popover-open::backdrop wird benötigt, um das 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-Features für geschmeidige Ein- und Austrittsanimationen auf developer.chrome.com (2023)