Eine Einführung in die View -Übergänge API

Übergänge anzeigen API: Innovative Technologien zur Vereinfachung der Webanimation

Übergänge ansehen API bietet eine einfachere Möglichkeit, Animation zwischen Webseitenelementen zu erreichen, sodass reibungslose Übergänge sogar zwischen den Seitenladungen ermöglicht werden können. Es ist eine fortschrittliche Verbesserungstechnologie mit guter Kompatibilität.

Der traditionelle CSS -Übergang und die Animation haben bemerkenswerte Errungenschaften bei Webeffekten erzielt, aber nicht alle Animationen sind leicht zu implementieren. Zum Beispiel erfordert die querbezogene Animation einer Liste von zehn Bildern und Titeln die folgenden Schritte:

1. Halten Sie das alte Dom -Element;
2. Erstellen Sie ein neues DOM -Element und fügen Sie es dem entsprechenden Ort der Seite hinzu
färben die alten Elemente aus, während sie in neuen Elementen verblassen;
3. (optional) Ersetzen Sie das alte Element durch das neue DOM -Element.
Die API der Ansicht übergeht diesen Prozess:

API erfasst Schnappschüsse des aktuellen Seitenstatus

Aktualisieren Sie das DOM, fügen Sie die erforderlichen Elemente hinzu
1. API erfasst Schnappschüsse des neuen Seitenstatus;
API verwendet den Standard -Fade -Effekt oder die benutzerdefinierte CSS -Animation, um Übergänge zwischen zwei Zuständen zu animieren.
3. Wir müssen das DOM nur ohne die extra komplizierten Schritte aktualisieren. Mit nur wenigen Codezeilen können Sie in Browsern, die die API der Sichtübergänge unterstützen, wunderschön glittartige Animationen erreichen.

Derzeit befindet sich die API in der experimentellen Phase, aber der neueste Browser auf Chrombasis unterstützt bereits einseitige DOM-Animationseffekte. Chrome 115 und später unterstützt auch Animationen zwischen Seitenladungen, z. B. auf typischen WordPress -Sites. Dies macht ohne JavaScript -Code einfacher.

Es ist zu beachten, dass Mozilla und Apple ihre Pläne zur Implementierung der API in Firefox und Safari nicht angekündigt haben. Browser, die die Sichtübergänge nicht unterstützen, funktionieren noch ordnungsgemäß. Daher ist es jetzt sicher, diesen Effekt hinzuzufügen.

Vergleich zwischen neuen und alten Technologien

ältere Entwickler fühlen sich möglicherweise vertraut. Internet Explorer 4.0, das 1997 veröffentlicht wurde, führte Element- und vollständige Übergangsfunktionen ein und wurde in IE5.5 aktualisiert, das 2000 veröffentlicht wurde. Wir können das

Tag verwenden, um verschiedene Übergangseffekte im PowerPoint -Stil hinzuzufügen:

Diese Technologie wurde jedoch nicht weit verbreitet, da sie kein Webstandard ist.

<meta>

Erstellen Sie Übergangseffekte innerhalb der Seite

<meta content="progid:DXImageTransform.Microsoft.Iris(Motion='in', IrisStyle='circle')" http-equiv="Page-Enter">
<meta content="progid:DXImageTransform.Microsoft.Iris(Motion='out', IrisStyle='circle')" http-equiv="Page-Exit">

Das folgende Beispiel zeigt, wie Sie einen einfachen Fade -Effekt anhand der Ansichtsübergänge in Chrom erstellen:

(Der Link und der Screenshot von CodePen -Beispiel 1 sollten hier eingebettet sein)

HTML -Code enthält zwei

Elemente, mit denen verschiedene Inhaltsblöcke angezeigt werden:

(HTML -Code -Snippets sollten hier eingebettet werden)

Die Funktion

switchArticle() übernimmt alle DOM -Updates und zeigt jedes hidden Element an, indem das Attribut <article></article> hinzugefügt oder entfernt wird. Wenn die Seite geladen wird, bestimmen Sie das aktive location.hash Element basierend auf dem <article></article> oder dem ersten <article></article> Element der Seiten -URL:

(JavaScript -Code -Snippets sollten hier eingebettet sein)

Funktion Handler -Funktion überwacht alle Seitenklicks und Anrufe #hash Wenn der Benutzer einen Link mit switchArticle():

klickt

(JavaScript -Code -Snippets sollten hier eingebettet sein)

Durch die Übergabe der switchArticle() -Funktion als Rückruf an document.startViewTransition() können wir die API der Ansichtsübergänge verwenden:

(JavaScript -Code -Snippets sollten hier eingebettet sein)

document.startViewTransition() erfasst einen Schnappschuss des Ausgangszustands, fährt switchArticle() aus, erfasst einen Schnappschuss des neuen Zustands und erzeugt einen Standard-halb-Sekunden-Fade-Effekt zwischen den beiden.

CSS -Selektoren ::view-transition-old(root) und ::view-transition-new(root) können verwendet werden, um die alten bzw. neuen Zustände einzustellen:

(CSS -Code -Snippets sollten hier eingebettet sein)

(Umfrageninhalte, einschließlich komplexerer Animationen, asynchroner DOM-Updates, Verwendung von Webanimationen-API, mehrseitigen Navigationsübergängen, Animation Discurable, Zusammenfassung und FAQs, müssen alle auf ähnliche Weise und den Code im Code im Code umgeschrieben werden Der ursprüngliche Text wird das Bild in die entsprechende Position einbettet und es in prägnanterer und klarerer Sprache beschreibt

Das obige ist der detaillierte Inhalt vonEine Einführung in die View -Übergänge API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!