Spas, gemeinsame Elementübergänge und neu bewertete Technologie

Nolan Lawson löste eine Diskussion aus, als er eine spürbare Abwechslung von einseitigen Anwendungen (SPA S) beschrieb:

Hip neue Frameworks wie Astro, Qwik und Elder.js werben ihre MPA [Multi-Page-Anwendung] mit „0KB JavaScript standardmäßig“ an. Blog-Beiträge machen die Runden, in denen alle Herausforderungen mit SPA S: History, Focus Management, Scroll-Restaurierung, CMD/Strg-Klick, Speicherlecks usw. gegen Spas aufgenommen werden.

Ich denke, was weniger diskutiert wird, ist jedoch, wie sich der Kontext in den letzten Jahren verändert hat, um MPAs mehr gegen Spas zu geben.

Es scheint, dass eine Reihe von Leuten wirklich an diesen ersten Teil festgehalten wird, weil Nolan ein Follow-up veröffentlichte, um zu verdeutlichen, dass Spas weit davon entfernt sind, zum Scheitern verurteilt zu werden:

[T] Er war nicht in meinem Posten, um Spas zu begraben und auf ihrem Grab zu tanzen. Ich denke, Spas sind großartig, ich habe an vielen von ihnen gearbeitet und ich denke, sie haben eine glänzende Zukunft vor sich. Mein Hauptpunkt war: Wenn der einzige Grund, warum Sie ein Spa verwenden, ist, dass „Navigationen schneller werden“, dann ist es vielleicht Zeit, dies neu zu bewerten.

Und es gibt guten Grund, warum er das sagt. Tatsächlich verweist der erste Artikel ausdrücklich auf die Arbeit, die über gemeinsame Elementübergänge durchgeführt wird. Wenn sie vorwärts gehen, haben wir eine API zum Animieren/Übergang/Größen-/Positionierungselementen am Seiteneingang und existieren. Jake Archibald hat gezeigt, wie es bei Google I/O 2022 funktioniert, und das Video ist ein Juwel.

Wenn Sie sich fragen, wie eine Seite in eine andere übergehen kann, nimmt der Browser Screenshots der ausgehenden Seite und der eingehenden Seite und wechselt dann zwischen diesen. Es ist also nicht so viel, dass eine Seite so viel wird wie der Browser, der sich an zwei Bildern hält, damit er eine animieren kann, während die andere animiert. Jake sagt, was hinter der Szene passiert, ist eine Dom-Struktur, die aus Pseudoelementen erstellt wird, die die Seitenbilder enthalten:

 <transition-container>
  <bile-wrapper>
    <ausgangszeit></ausgangszeit>
    <einsinken-image></einsinken-image>
  >
></bile-wrapper></transition-container>

Wir können ein bestimmtes Element „Screenshot“ haben, wenn wir es isolieren und eine andere Animation als der Rest der Seite anwenden möchten:

 .Site-Header {
  Seitenübergangstag: Site-Header;
  enthalten: Farbe;
}

Und wir erhalten Pseudo-Elemente, die wir uns anpassen können und benutzerdefinierte @Keyframe-Animationen zuweisen können:

 
<transition-container>
  
  <bile-wrapper>
    
    <ausgangszeit></ausgangszeit>
    
    <einsinken-image></einsinken-image>
  >
></bile-wrapper></transition-container>

Dang, das ist klug wie verdammt!

Es ist auch ein Beweis für den Pudding, wie viel HTML, CSS und JavaScript weiterentwickeln und sich verbessern. So sehr, dass Jeremy Keith vorschlägt, dass es höchste Zeit ist, unser früheres Urteil über einige Technologien neu zu bewerten:

Wenn Sie sich in den letzten Jahren nicht der Veränderungen bewusst wären, wäre es leicht zu glauben, dass einzelne Seiten -Apps einige einzigartige Vorteile bieten, die tatsächlich nicht mehr zutreffen. […] Aber Entwickler bleiben misstrauisch und bevorzugen immer noch, dass sie Drittbibliotheken gegenüber nativen Browserfunktionen vertrauen. Sie haben eine Entscheidung über diese Bibliotheken in der Vergangenheit getroffen. Sie bewerteten den Zustand der Browserunterstützung in der Vergangenheit. Ich wünschte, sie würden diese Entscheidungen neu bewerten.

Die Zutaten für Spas speziell:

Insbesondere in den letzten Jahren hat es das Gefühl, dass das Web sprunghaft gekommen ist: Servicearbeiter, native JavaScript -APIs und ein erstaunlicher Schub bei dem, was Sie mit CSS machen können. Am wichtigsten ist, dass die Interoperabilität zwischen Browsern immer besser wird. Die universelle Unterstützung für neue Webstandards kommt schneller als je zuvor.

HTML, CSS und JavaScript: Es ist immer noch der beste Cocktail der Stadt. Auch wenn es eine Minute dauert, bis es aufholte.

Das obige ist der detaillierte Inhalt vonSpas, gemeinsame Elementübergänge und neu bewertete Technologie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!