ü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!