overlay

auto

Das Element wird in der obersten Schicht gerendert, wenn es in die oberste Schicht gehoben wird.

none

Das Element wird nicht in der obersten Schicht gerendert.

overlay = 
  none  |
  auto  

In diesem Beispiel wird ein Popover animiert, während es von verborgen zu angezeigt wechselt und umgekehrt.

HTML

Das HTML enthält ein <div>-Element, das als Popover mit dem popover Attribut deklariert ist, und ein <button>-Element, das als Anzeige-Steuerelement des Popovers mit seinem popovertarget Attribut angegeben 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 übergegangenen Eigenschaften vorhanden. Da overlay eine von der Benutzeragentur kontrollierte Eigenschaft ist, wird sie nicht in den Pre-Transition- oder Post-Transition-Zustä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: rgb(0 0 0 / 0%);
  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: rgb(0 0 0 / 0%);
  }
}

Die beiden Eigenschaften, die wir animieren möchten, sind opacity und transform): wir möchten, dass das Popover ein- und ausgeblendet wird, während es sich in der horizontalen Richtung vergrößert und verkleinert. Wir setzen einen Ausgangszustand 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 Pseudo-Klasse). Wir setzen dann eine transition Eigenschaft, um zwischen den beiden zu animieren.

Weil das animierte Element in die oberste Schicht gehoben wird, wenn es angezeigt wird, und aus der obersten Schicht entfernt wird, wenn es verborgen ist, wird overlay zur Liste der übergegangenen Elemente hinzugefügt. Dies stellt sicher, dass die Entfernung des Elements aus der obersten Schicht aufgeschoben wird, bis die Animation beendet ist. Dies macht keinen großen Unterschied bei einfachen Animationen wie dieser, aber in komplexeren Fällen kann das Ergebnis sein, dass das Element aus der Überlagerung zu schnell entfernt wird, was bedeutet, dass die Animation nicht glatt oder effektiv ist. Beachten Sie, dass der Wert transition-behavior: allow-discrete auch im Shorthand gesetzt wird, um diskrete Übergänge zu ermöglichen.

Die folgenden Schritte sind ebenfalls erforderlich, um die Animation in beide Richtungen zum Laufen zu bringen:

• Ein Startzustand für die Animation wird innerhalb der @starting-style At-Regel gesetzt. Das ist erforderlich, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden Übergänge nicht bei den ersten Stil-Updates von Elementen ausgelöst oder wenn sich der display-Typ von none zu einem anderen Typ ändert. @starting-style erlaubt es Ihnen, diesen Standard auf eine bestimmte kontrollierte Weise zu überschreiben. Ohne dies würde die Eintrittsanimation nicht stattfinden und das Popover würde einfach erscheinen.
• display wird ebenfalls zur Liste der übergegangenen 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; in der Tat 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 eingeschlossen haben, der hinter dem Popover erscheint, wenn es sich öffnet, um eine schöne Verdunkelungsanimation zu bieten. [popover]:popover-open::backdrop wird benötigt, um das Backdrop auszuwählen, wenn das Popover geöffnet ist.

Ergebnis

Der Code wird wie folgt gerendert:

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