Verwenden der Popover-API

Die Popover-API bietet Entwicklern einen standardisierten, konsistenten und flexiblen Mechanismus zum Anzeigen von Popover-Inhalten über anderen Seiteninhalten. Popover-Inhalte können entweder deklarativ über HTML-Attribute oder über JavaScript gesteuert werden. Dieser Artikel bietet einen detaillierten Leitfaden zur Nutzung aller Funktionen.

Erstellung deklarativer Popover

In seiner einfachsten Form wird ein Popover durch Hinzufügen des popover-Attributs zu dem Element erstellt, das Sie zur Aufnahme Ihrer Popover-Inhalte verwenden möchten. Eine id ist ebenfalls erforderlich, um das Popover mit seinen Steuerungselementen zu verknüpfen.

<div id="mypopover" popover>Popover content</div>

Das Hinzufügen dieses Attributs bewirkt, dass das Element beim Laden der Seite ausgeblendet wird, indem darauf display: none angewendet wird. Um das Popover anzuzeigen/verbergen, müssen Sie mindestens einen Steuerschaltfläche (auch als Popover Invoker bekannt) hinzufügen. Sie können eine <button> (oder <input> von type="button") als Popover-Steuerschaltfläche festlegen, indem Sie ihr ein popovertarget Attribut geben, dessen Wert die ID des Popovers sein sollte, das gesteuert werden soll:

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>

Das Standardverhalten ist, dass die Schaltfläche eine Umschalttaste ist – durch wiederholtes Drücken wird das Popover zwischen angezeigtem und verborgenem Zustand umgeschaltet.

Wenn Sie dieses Verhalten ändern möchten, können Sie das popovertargetaction Attribut verwenden, das einen Wert von "hide", "show" oder "toggle" annehmen kann. Beispielweise, um separate Anzeigen- und Ausblendeschaltflächen zu erstellen, könnten Sie dies wie folgt tun:

<button popovertarget="mypopover" popovertargetaction="show">
 Show popover
</button>
<button popovertarget="mypopover" popovertargetaction="hide">
 Hide popover
</button>
<div id="mypopover" popover>Popover content</div>

Sie können sehen, wie das vorherige Codebeispiel in unserem Beispiel für ein grundlegendes deklaratives Popover (Quelle) gerendert wird.

Wenn ein Popover angezeigt wird, wird display: none davon entfernt und es wird in die obere Ebene gestellt, sodass es über allen anderen Seiteninhalten liegt.

command und commandfor

Die Attribute commandfor und command bieten eine sehr ähnliche Funktionalität wie popovertarget und popovertargetaction, aber mit einem allgemeineren Design, das über Popover-Befehle hinaus andere Funktionalitäten einschließlich benutzerdefinierter Befehle bieten soll.

Das vorherige Codebeispiel könnte wie folgt umgeschrieben werden:

<button commandfor="mypopover" command="show-popover">Show popover</button>
<button commandfor="mypopover" command="hide-popover">Hide popover</button>
<div id="mypopover" popover>Popover content</div>

Auto-Zustand und "Light Dismiss"

Wenn ein Popover-Element mit popover oder popover="auto" wie oben gezeigt eingestellt ist, heißt es, dass es einen Auto-Zustand hat. Die wichtigen Verhaltensweisen, die beim Auto-Zustand zu beachten sind, sind:

• Das Popover kann "leicht verworfen" werden — das bedeutet, dass Sie das Popover ausblenden können, indem Sie außerhalb davon klicken.
• Das Popover kann auch über browser-spezifische Mechanismen geschlossen werden, wie das Drücken der Esc-Taste.
• Normalerweise kann nur ein auto-Popover gleichzeitig angezeigt werden — das Anzeigen eines zweiten Popovers, während eines bereits angezeigt wird, blendet das erste aus. Die Ausnahme zu dieser Regel ist, wenn Sie verschachtelte Auto-Popover haben. Siehe den Abschnitt Verschachtelte Popover für weitere Details.

Der Auto-Zustand ist nützlich, wenn Sie jeweils nur ein einzelnes Popover zeigen möchten. Vielleicht haben Sie mehrere Lern-UI-Nachrichten, die Sie anzeigen möchten, aber nicht möchten, dass der Anzeigebereich überladen und verwirrend wird. Oder vielleicht zeigen Sie Statusnachrichten an, bei denen der neue Status einen vorherigen überschreibt.

Sie können das oben beschriebene Verhalten in Aktion in unserem Beispiel für mehrere Auto-Popover (Quelle) sehen. Versuchen Sie, die Popover leicht zu verwerfen, nachdem sie angezeigt werden, und sehen Sie, was passiert, wenn Sie versuchen, beide gleichzeitig anzuzeigen.

Popover-Barrierefreiheitsfunktionen

Wenn eine Beziehung zwischen einem Popover und seiner Steuerung (Invoker) über das popovertarget-Attribut hergestellt wird, nimmt die API automatisch zwei weitere Änderungen an der Umgebung vor, um Tastatur- und Hilfstechnologie (AT)-Nutzern das Interagieren mit dem Popover zu erleichtern:

• Wenn das Popover angezeigt wird, wird die Tastaturfokus-Navigationsreihenfolge aktualisiert, sodass das Popover das nächste in der Reihenfolge ist: Zum Beispiel, wenn eine Schaltfläche gedrückt wird, um ein Popover anzuzeigen, sind alle Schaltflächen im Popover die nächsten in der Tabulatorreihenfolge (werden beim Drücken der Tab-Taste fokussiert). Umgekehrt wird beim Schließen des Popovers über die Tastatur (normalerweise über die Esc-Taste) der Fokus zurück auf den Invoker verschoben.
• Um AT wie Bildschirmlesegeräten das Verständnis der Beziehung zwischen dem Invoker und dem Popover zu ermöglichen, wird eine implizite aria-details und aria-expanded Beziehung zwischen ihnen eingerichtet.

Durch das Einrichten einer Beziehung zwischen einem Popover und seiner Steuerung auf diese Weise wird auch eine implizite Ankerreferenz zwischen den beiden erstellt – siehe Popover Ankerpositionierung für weitere Details.

Weitere Möglichkeiten zum Einrichten einer Popover-Invoker-Beziehung

Sie können auch auf andere Weise, zusätzlich zum popovertarget-Attribut, eine Popover-Invoker-Beziehung einrichten:

• Durch Verwenden der source-Option der HTMLElement.showPopover() oder HTMLElement.togglePopover() Methoden. Beachten Sie, dass in diesem Fall nur die Änderungen der Fokussierungsreihenfolge vorgenommen werden, nicht die implizite ARIA-Beziehung. Dies liegt daran, dass die source-Option auf jede Art von Element gesetzt werden kann, nicht nur auf <button>-Elemente, und es kann nicht garantiert werden, dass die Beziehung sinnvoll wäre.
• Zwischen einem <select>-Element und seinen Dropdown-Picker, wenn es sich in die anpassbare Select-Element Funktionalität über die appearance Eigenschaft base-select-Wert einkoppelt. In diesem Fall wird eine implizite Popover-Invoker-Beziehung zwischen den beiden erstellt.

Verwendung manuellen Popover-Zustands

Eine Alternative zum Auto-Zustand ist der manuelle Zustand, der durch Setzen von popover="manual" auf Ihrem Popover-Element erreicht wird:

<div id="mypopover" popover="manual">Popover content</div>

In diesem Zustand:

• Das Popover kann nicht "leicht verworfen" werden, obwohl deklarative Anzeigen-/Ausblende-/Umschalttasten (wie zuvor gesehen) weiterhin funktionieren.
• Mehrere unabhängige Popover können gleichzeitig angezeigt werden.

Sie können dieses Verhalten in Aktion in unserem Beispiel für mehrere manuelle Popover (Quelle) sehen.

Die beforetoggle und toggle Ereignisse

Sie können auf das Anzeigen oder Verbergen eines Popovers reagieren, indem Sie die beforetoggle und toggle Ereignisse verwenden:

• beforetoggle wird kurz vor dem Anzeigen oder Verbergen eines Popovers ausgelöst. Dies kann beispielsweise verwendet werden, um das Anzeigen oder Verbergen des Popovers zu verhindern (durch Verwenden von Event.preventDefault()), um Animationsklassen zu einem Popover hinzuzufügen, um es zu animieren, oder um den Zustand eines Popovers nach seiner Verwendung zu bereinigen.
• toggle wird direkt nach dem Anzeigen oder Verbergen eines Popovers ausgelöst. Dies wird im Allgemeinen verwendet, um anderen Code als Reaktion auf eine Zustandsänderung des Popovers auszuführen.

Beide Ereignisse verfügen über ein ToggleEvent Ereignisobjekt. Dieses Ereignis hat zusätzlich zu den vom standardmäßigen Event geerbten Funktionen folgende Merkmale:

• Die Eigenschaften oldState und newState zeigen an, aus welchem Zustand das Popover gerade übergegangen ist und in welchen Zustand es übergeht, sodass Sie gezielt auf das Öffnen oder Schließen eines Popovers reagieren können.
• Die Eigenschaft source enthält einen Verweis auf das HTML-Popover-Steuerelement, das den Umschaltvorgang initiiert hat, sodass Sie unterschiedlichen Code als Reaktion auf das Umschaltereignis ausführen können, je nachdem, welches Steuerelement es initiiert hat.

Typische Verwendung könnte ähnlich wie folgt aussehen:

const popover = document.getElementById("mypopover");
popover.addEventListener("toggle", (e) => {
 console.log(e.newState);
});

Siehe die vorherigen Referenzlinks für weitere Informationen und Beispiele.

Anzeigen von Popovern über JavaScript

Sie können Popover auch über eine JavaScript-API steuern.

Die HTMLElement.popover Eigenschaft kann verwendet werden, um das popover Attribut abzurufen oder festzulegen. Dies kann verwendet werden, um ein Popover über JavaScript zu erstellen und ist auch nützlich für die Funktionsüberprüfung. Zum Beispiel:

function supportsPopover() {
 return Object.hasOwn(HTMLElement.prototype, "popover");
}

Ebenso:

• HTMLButtonElement.popoverTargetElement und HTMLInputElement.popoverTargetElement bieten ein Äquivalent zum popovertarget Attribut, das es Ihnen ermöglicht, die Steuerschaltfläche(n) für ein Popover einzurichten, obwohl der Eigenschaftswert ein Verweis auf das zu steuernde Popover-DOM-Element ist.
• HTMLButtonElement.popoverTargetAction und HTMLInputElement.popoverTargetAction bieten ein Äquivalent zum globalen HTML-Attribut popovertargetaction, das es Ihnen ermöglicht, die von einer Steuerschaltfläche ausgeführte Aktion anzugeben.

Indem Sie diese drei miteinander kombinieren, können Sie ein Popover und seine Steuerschaltfläche programmatisch einrichten, wie folgt:

const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");
const keyboardHelpPara = document.getElementById("keyboard-help-para");
const popoverSupported = supportsPopover();
if (popoverSupported) {
 popover.popover = "auto";
 toggleBtn.popoverTargetElement = popover;
 toggleBtn.popoverTargetAction = "toggle";
} else {
 toggleBtn.style.display = "none";
}

Sie haben auch mehrere Methoden zum Steuern des Anzeigens und Ausblendens:

• HTMLElement.showPopover() zum Anzeigen eines Popovers.
• HTMLElement.hidePopover() zum Ausblenden eines Popovers.
• HTMLElement.togglePopover() zum Umschalten eines Popovers.

Beispielsweise möchten Sie möglicherweise die Möglichkeit bieten, ein Hilfe-Popover per Klick auf eine Schaltfläche oder durch Drücken einer bestimmten Taste auf der Tastatur ein- und auszublenden. Die erste Möglichkeit könnte deklarativ umgesetzt werden, oder Sie könnten es mithilfe von JavaScript tun, wie oben gezeigt.

Für die zweite Möglichkeit könnten Sie einen Ereignishandler erstellen, der zwei separate Tasten programmiert — eine, um das Popover zu öffnen, und eine, um es wieder zu schließen:

document.addEventListener("keydown", (event) => {
 if (event.key === "h") {
 if (popover.matches(":popover-open")) {
 popover.hidePopover();
 }
 }
 if (event.key === "s") {
 if (!popover.matches(":popover-open")) {
 popover.showPopover();
 }
 }
});

In diesem Beispiel wird Element.matches() verwendet, um programmgesteuert zu überprüfen, ob ein Popover derzeit angezeigt wird. Die :popover-open Pseudoklasse entspricht nur Popovern, die derzeit angezeigt werden. Dies ist wichtig, um die Fehler zu vermeiden, die auftreten, wenn Sie versuchen, ein bereits angezeigtes Popover zu öffnen oder ein bereits ausgeblendetes Popover zu schließen.

Alternativ könnten Sie eine einzelne Taste programmieren, um das Popover zu zeigen und auszublenden, wie folgt:

document.addEventListener("keydown", (event) => {
 if (event.key === "h") {
 popover.togglePopover();
 }
});

Siehe unser Beispiel für umschaltbare Hilfe-UI (Quelle), um die JavaScript-Eigenschaften des Popovers, die Funktionsüberprüfung und die Verwendung der togglePopover()-Methode in Aktion zu sehen.

Verschachtelte Popovers

Es gibt eine Ausnahme von der Regel, keine mehreren Auto-Popovers gleichzeitig anzuzeigen — wenn sie ineinander verschachtelt sind. In solchen Fällen dürfen mehrere Popovers aufgrund ihrer Beziehung zueinander gleichzeitig geöffnet sein. Dieses Muster wird unterstützt, um Anwendungsfälle wie verschachtelte Popover-Menüs zu ermöglichen.

Es gibt drei verschiedene Möglichkeiten, verschachtelte Popovers zu erstellen:

1. Direkte DOM-Nachkommen:

   html

   <div popover>
    Parent
    <div popover>Child</div>
   </div>
   

2. Über Invoking/Steuerelemente:

   html

   <div popover>
    Parent
    <button popovertarget="foo">Click me</button>
   </div>
   <div popover id="foo">Child</div>
   

3. Über das anchor-Attribut:

   html

   <div popover id="foo">Parent</div>
   <div popover anchor="foo">Child</div>
   

Siehe unser Beispiel für verschachtelte Popover-Menüs (Quelle) für ein Beispiel. Sie werden feststellen, dass eine ganze Reihe von Ereignishandlern verwendet wurden, um das Subpopover während des Zugriffs über die Maus und die Tastatur angemessen anzuzeigen und auszublenden, und auch beide Menüs auszublenden, wenn eine Option ausgewählt wird. Je nachdem, wie Sie das Laden neuer Inhalte behandeln, entweder in einer SPA oder einer Multi-Page-Website, können einige oder alle davon nicht erforderlich sein, aber sie wurden in diesem Demo zu Veranschaulichungszwecken aufgenommen.

Verwendung des "Hint" Popover-Zustands

Es gibt einen dritten Typ von Popovers, den Sie erstellen können — Hint-Popovers, die durch Einstellen von popover="hint" auf Ihrem Popover-Element gekennzeichnet sind. hint-Popovers schließen auto-Popovers beim Anzeigen nicht, aber sie schließen andere hint-Popovers. Sie können leicht verworfen werden und reagieren auf Schließanfragen.

Dies ist nützlich in Situationen, in denen Sie beispielsweise Werkzeugleistenschaltflächen haben, die gedrückt werden können, um UI-Popovers anzuzeigen, aber Sie auch Tooltips anzeigen möchten, wenn die Schaltflächen überfahren werden, ohne die UI-Popovers zu schließen.

hint-Popovers werden tendenziell als Reaktion auf Nicht-Klick-JavaScript-Ereignisse wie mouseover/mouseout und focus/blur angezeigt und ausgeblendet. Das Klicken auf eine Schaltfläche, um ein hint-Popover zu öffnen, würde ein geöffnetes auto-Popover leicht verworfen.

Siehe unser Demo zu "hint" Popovers (Quelle) für ein Beispiel, das genau wie oben beschrieben verhält. Das Demo verfügt über eine Schaltflächenleiste; wenn sie gedrückt wird, zeigen die Schaltflächen auto-Popup-Untermenüs, in denen weitere Optionen ausgewählt werden können. Wenn sie jedoch überfahren oder fokussiert werden, zeigen die Schaltflächen auch Tooltips (hint Popovers), um dem Benutzer eine Vorstellung davon zu geben, was jede Schaltfläche tut, ohne dass ein derzeit angezeigtes Untermenü ausgeblendet wird.

In den folgenden Abschnitten gehen wir auf alle wichtigen Teile des Codes ein.

Erstellung der Untermenüs mit popover="auto"

Die Popup-Untermenüs werden deklarativ mit auto-Popovers erstellt.

Zuerst die Steuerschaltflächen:

<section id="button-bar">
 <button popovertarget="submenu-1" popovertargetaction="toggle" id="menu-1">
 Menu A
 </button>
 <button popovertarget="submenu-2" popovertargetaction="toggle" id="menu-2">
 Menu B
 </button>
 <button popovertarget="submenu-3" popovertargetaction="toggle" id="menu-3">
 Menu C
 </button>
</section>

Jetzt die Popovers selbst:

<div id="submenu-1" popover="auto">
 <button>Option A</button><br /><button>Option B</button>
</div>
<div id="submenu-2" popover="auto">
 <button>Option A</button><br /><button>Option B</button>
</div>
<div id="submenu-3" popover="auto">
 <button>Option A</button><br /><button>Option B</button>
</div>

Erstellung der Tooltips mit popover="hint"

Die Untermenü-Popovers funktionieren gut wie sie sind, öffnend, wenn die Werkzeugleistenschaltflächen gedrückt werden, aber wie zeigen wir auch Tooltips bei Schaltflächen-Hover/Fokus? Zuerst erstellen wir die Tooltips in HTML, indem wir hint-Popovers verwenden:

<div id="tooltip-1" class="tooltip" popover="hint">Tooltip A</div>
<div id="tooltip-2" class="tooltip" popover="hint">Tooltip B</div>
<div id="tooltip-3" class="tooltip" popover="hint">Tooltip C</div>

Um das Anzeigen/Verbergen zu steuern, müssen wir JavaScript verwenden. Zuerst holen wir Referenzen auf die hint-Popovers und die Steuerschaltflächen in zwei separaten NodeLists mithilfe von Document.querySelectorAll():

const tooltips = document.querySelectorAll(".tooltip");
const btns = document.querySelectorAll("#button-bar button");

Als nächstes erstellen wir eine Funktion addEventListeners(), die vier Ereignis-Listener (über EventTarget.addEventListener()) auf einem gegebenen <button> setzt, ausgewählt durch Abrufen des <button> an einem bestimmten Indexwert der btns NodeList. Die Funktionen wirken sich auf das hint Popover am gleichen Indexwert der tooltips NodeList aus, sodass wir die Schaltflächen und die Tooltips synchronisieren können — das richtige Tooltip anzeigen/verbergen, wenn eine Schaltfläche interagiert wird.

Die Ereignis-Listener zeigen das Popover bei mouseover und focus und verbergen das Popover bei mouseout und blur, was bedeutet, dass die Tooltips über Maus und Tastatur zugänglich sind.

function addEventListeners(i) {
 btns[i].addEventListener("mouseover", () => {
 tooltips[i].showPopover({ source: btns[i] });
 });
 btns[i].addEventListener("mouseout", () => {
 tooltips[i].hidePopover();
 });
 btns[i].addEventListener("focus", () => {
 tooltips[i].showPopover({ source: btns[i] });
 });
 btns[i].addEventListener("blur", () => {
 tooltips[i].hidePopover();
 });
}

Schließlich verwenden wir eine for Schleife, um durch die <button>-Elemente in der btns NodeList zu iterieren und unsere addEventListeners() Funktion für jedes aufrufen, sodass alle die gewünschten Ereignis-Listener gesetzt haben.

for (let i = 0; i < btns.length; i++) {
 addEventListeners(i);
}

Popovers gestalten

Dieser Abschnitt behandelt einige CSS-Auswahl- und Positionierungstechniken, die für Popovers relevant sind.

Popovers auswählen

Sie können alle Popovers mit einem einfachen Attributselektor auswählen:

[popover] {
 /* Declarations here */
}

Alternativ können Sie eine bestimmte Popover-Art auswählen, indem Sie einen Wert im Attributselektor angeben:

[popover="auto"] {
 /* Declarations here */
}

Sie können nur Popovers auswählen, die mit der :popover-open Pseudoklasse angezeigt werden:

:popover-open {
 /* Declarations here */
}

Styling des Popover-Hintergrunds

Das ::backdrop Pseudoelement ist ein Vollbildelement, das direkt hinter den angezeigten Popover-Elementen in der oberen Ebene platziert ist, sodass dem Seiteninhalt hinter dem/den Popover(s) bei Bedarf Effekte hinzugefügt werden können. Sie könnten zum Beispiel den Inhalt hinter dem Popover verwischen, um die Aufmerksamkeit des Benutzers darauf zu lenken:

::backdrop {
 backdrop-filter: blur(3px);
}

Siehe unser Beispiel für Popover-Blur-Hintergrund (Quelle) für eine Idee, wie dies gerendert wird.

Positionierung von Popovers

Beim Betrachten der ersten beiden Beispiele, die am Anfang des Artikels verlinkt sind, haben Sie möglicherweise bemerkt, dass die Popovers in der Mitte des Ansichtsbereichs erscheinen, ihren Inhalt umschließen und eine schwarze Grenze haben. Dies ist das Standardstil, das durch die folgende Regel im UA-Stylesheet erreicht wird:

[popover] {
 position: fixed;
 inset: 0;
 width: fit-content;
 height: fit-content;
 margin: auto;
 border: solid;
 padding: 0.25em;
 overflow: auto;
 color: CanvasText;
 background-color: Canvas;
}

Um eine benutzerdefinierte Größe anzuwenden und das Popover woanders zu positionieren, könnten Sie die oben genannten Stile mit etwas wie diesem überschreiben:

:popover-open {
 width: 200px;
 height: 100px;
 position: absolute;
 inset: unset;
 bottom: 5px;
 right: 5px;
 margin: 0;
}

Sie können ein isoliertes Beispiel dafür in unserem Beispiel zur Popover-Positionierung (Quelle) sehen.

Popover-Ankerpositionierung

Es gibt eine weitere nützliche Positionierungsoption, die die Popover-API bietet. Wenn Sie ein Popover relativ zu seinem Invoker anstatt dem Ansichtsbereich oder einem positionierten Vorfahr positionieren möchten, können Sie den Vorteil nutzen, dass Popovers und ihre Invoker eine implizite Ankerreferenz haben.

Das Verknüpfen jeder Art von Popover mit seinem Invoker erstellt eine implizite Ankerreferenz zwischen den beiden. Dies führt dazu, dass der Invoker zum Ankerelement des Popovers wird, was bedeutet, dass Sie das Popover relativ dazu mithilfe von CSS-Ankerpositionierung positionieren können.

Da die Zuordnung zwischen dem Popover und dem Invoker implizit erfolgt, muss keine explizite Zuordnung mithilfe der anchor-name und position-anchor Eigenschaften gemacht werden. Sie müssen jedoch immer noch die CSS-Positionierung angeben.

Zum Beispiel könnten Sie eine Kombination von anchor() Funktionswerten auf Einsetzen von Eigenschaften und anchor-center Werten auf Ausrichtungseigenschaften verwenden:

.my-popover {
 margin: 0;
 inset: auto;
 bottom: calc(anchor(top) + 20px);
 justify-self: anchor-center;
}

Oder Sie könnten eine position-area Eigenschaft verwenden:

.my-popover {
 margin: 0;
 inset: auto;
 position-area: top;
}

Beim Verwenden von position-area oder anchor() zur Positionierung von Popovers sollten Sie beachten, dass die Standardstile für Popovers mit der zu erreichenden Position in Konflikt geraten könnten. Die üblichen Verdächtigen sind die Standardstile für margin und inset, daher ist es ratsam, diese zurückzusetzen, wie in den obigen Beispielen gezeigt. Die CSS-Arbeitsgruppe prüft Möglichkeiten, diesen Workaround zu vermeiden.

Sehen Sie Verwendung der CSS-Ankerpositionierung für weitere Details zur Verknüpfung von Anker- und positionierten Elementen und zur Positionierung von Elementen relativ zu ihrem Anker.

Animieren von Popovers

Popovers sind auf display: none; gesetzt, wenn sie ausgeblendet sind, und display: block;, wenn sie angezeigt werden, und werden aus der/der oberen Ebene und dem Barrierefreiheitsbaum entfernt/zugefügt. Daher muss die display Eigenschaft animierbar sein, damit Popovers animiert werden können. Unterstützende Browser animieren display mit einer Variation des diskreten Animationstyps. Konkret wird der Browser zwischen none und einem anderen display-Wert wechseln, sodass der animierte Inhalt während der gesamten Animationsdauer angezeigt wird. Zum Beispiel:

• Beim Animieren von display von none zu block (oder einem anderen sichtbaren display-Wert) wechselt der Wert bei 0% der Animationsdauer zu block, sodass er die ganze Zeit sichtbar ist.
• Beim Animieren von display von block (oder einem anderen sichtbaren display-Wert) zu none wechselt der Wert bei 100% der Animationsdauer zu none, sodass er die ganze Zeit sichtbar ist.

Ein Popover übergehen

Beim Animieren von Popovers mit CSS-Übergängen sind folgende Funktionen erforderlich:

@starting-style @-Regel

Bietet eine Reihe von Startwerten für auf das Popover gesetzte Eigenschaften, von denen Sie beim ersten Anzeigen übergehen möchten. Dies ist erforderlich, um unerwartetes Verhalten zu vermeiden. Standardmäßig treten CSS-Übergänge nur auf, wenn ein Wert einer Eigenschaft auf einem sichtbaren Element von einem Wert zu einem anderen wechselt; sie werden nicht bei der ersten Stilaktualisierung eines Elements oder beim Wechsel des display-Typs von none zu einem anderen Typ ausgelöst.

display Eigenschaft

Fügen Sie display zur Liste der Übergänge hinzu, damit das Popover während der Übergangsdauer als display: block (oder ein anderer sichtbarer display-Wert) bleibt und der andere Übergang sichtbar ist.

overlay Eigenschaft

Fügen Sie overlay zur Übergangsliste hinzu, um sicherzustellen, dass die Entfernung des Popovers von der oberen Ebene erst nach Abschluss des Übergangs erfolgt, damit der Übergang wieder sichtbar ist.

transition-behavior Eigenschaft

Setzen Sie transition-behavior: allow-discrete auf die display- und overlay-Übergänge (oder auf das transition-Kurzzeichen), um diskrete Übergänge auf diesen beiden Eigenschaften zu ermöglichen, die standardmäßig nicht animierbar sind.

Schauen wir uns ein Beispiel an, damit Sie sehen können, wie das aussieht:

HTML

Das HTML enthält ein <div>-Element, das über das globale popover HTML-Attribut als Popover deklariert ist, und ein <button>-Element, das als Steuerung für die Anzeige des Popovers bestimmt ist:

<button popovertarget="mypopover">Show the popover</button>
<div popover="auto" id="mypopover">I'm a Popover! I should animate.</div>

CSS

Die beiden Popover-Eigenschaften, die wir übergeben möchten, sind opacity und transform. Wir möchten, dass das Popover beim Ein- und Ausblenden verblasst und sich dabei horizontal vergrößert oder verkleinert. Um dies zu erreichen, setzen wir einen Startzustand für diese Eigenschaften auf den ausgeblendeten Zustand des Popover-Elements (ausgewählt mit dem [popover] Attributselektor) und einen Endzustand für den angezeigten Zustand des Popovers (ausgewählt über die :popover-open Pseudoklasse). Wir verwenden auch die transition-Eigenschaft, um die zu animierenden Eigenschaften und die Dauer der Animation beim Anzeigen oder Ausblenden des Popovers zu definieren.

html {
 font-family: "Helvetica", "Arial", sans-serif;
}
/* Transition for the popover itself */
[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 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%);
}
/* The nesting selector (&) cannot represent pseudo-elements
so this starting-style rule cannot be nested */
@starting-style {
 [popover]:popover-open::backdrop {
 background-color: transparent;
 }
}

Wie bereits erwähnt, haben wir auch:

• Einen Startzustand für die transition innerhalb des @starting-style Blocks gesetzt.
• display zur Liste der übergangenen Eigenschaften hinzugefügt, damit das animierte Element während des Ein- und Ausblendeanimations sichtbar (auf display: block gesetzt) bleibt. Ohne dies wäre die Ausblendeanimation nicht sichtbar; in der Tat würde das Popover einfach verschwinden.
• overlay zur Liste der übergangenen Eigenschaften hinzugefügt, um sicherzustellen, dass das Entfernen des Elements von der oberen Ebene erst nach Abschluss der Animation erfolgt. Der Effekt davon ist möglicherweise nicht für grundlegende Animationen erkennbar, aber in komplexeren Fällen kann das Weglassen dieser Eigenschaft dazu führen, dass das Element aus dem Overlay entfernt wird, bevor der Übergang abgeschlossen ist.
• allow-discrete auf beiden Eigenschaften in den obigen Übergängen gesetzt, um diskrete Übergänge zu ermöglichen.

Sie werden feststellen, dass wir auch einen Übergang beim Erscheinen des ::backdrop hinter dem Popover hinzugefügt haben, der eine nette Verdunklungsanimation bietet.

Ergebnis

Der Code wird wie folgt gerendert:

Eine Popover-Schlüsselbildanimation

Beim Animieren eines Popovers mit CSS-Schlüsselbildanimationen gibt es einige Unterschiede zu beachten:

• Sie geben kein @starting-style; Sie fügen Ihre "to" und "from" display-Werte in Schlüsselbilder ein.
• Sie aktivieren diskrete Animationen nicht explizit; es gibt nichts Vergleichbares zu allow-discrete innerhalb von Schlüsselbildern.
• Sie müssen overlay innerhalb von Schlüsselbildern nicht setzen; die display-Animation verarbeitet die Animation des Popovers von sichtbar zu ausgeblendet.

Schauen wir uns ein Beispiel an.

HTML

Das HTML enthält ein <div>-Element, das als Popover deklariert ist, und ein <button>-Element, das als Steuerung für die Anzeige des Popovers bestimmt ist:

<button popovertarget="mypopover">Show the popover</button>
<div popover="auto" id="mypopover">I'm a Popover! I should animate.</div>

CSS

Wir haben Schlüsselbilder definiert, die die gewünschten Eintritts- und Austrittsanimationen sowie eine Eintrittsanimation für das Hintergrundbild spezifizieren. Beachten Sie, dass es nicht möglich war, das Verblassen des Hintergrundbilds auszublenden — das Hintergrundbild wird sofort aus dem DOM entfernt, wenn das Popover geschlossen wird, sodass nichts mehr animiert werden kann.

html {
 font-family: "Helvetica", "Arial", sans-serif;
}
[popover] {
 font-size: 1.2rem;
 padding: 10px;
 animation: fade-out 0.7s ease-out;
}
[popover]:popover-open {
 animation: fade-in 0.7s ease-out;
}
[popover]:popover-open::backdrop {
 animation: backdrop-fade-in 0.7s ease-out forwards;
}
/* Animation keyframes */
@keyframes fade-in {
 0% {
 opacity: 0;
 transform: scaleX(0);
 }
 100% {
 opacity: 1;
 transform: scaleX(1);
 }
}
@keyframes fade-out {
 0% {
 opacity: 1;
 transform: scaleX(1);
 /* display needed on the closing animation to keep the popover
 visible until the animation ends */
 display: block;
 }
 100% {
 opacity: 0;
 transform: scaleX(0);
 /* display: none not required here because it is the default value
 for a closed popover, but including it so the behavior is clear */
 display: none;
 }
}
@keyframes backdrop-fade-in {
 0% {
 background-color: transparent;
 }
 100% {
 background-color: rgb(0 0 0 / 25%);
 }
}

Ergebnis

Der Code wird wie folgt gerendert:

Siehe auch

• Sammlung von Popover-API-Beispielen