Konvertierung in Astro anzeigen: Ein leistungsstarkes Werkzeug für reibungslose Seitenschaltern

Dieser Artikel wird aus SitePoint Premiums Buch "Entfesseln der Kraft von Astro" ausgew?hlt, in der die Ansichtsumwandlungsfunktion in Astro eingeführt wird.

Die API der Ansichtstransformation bietet eine bequeme M?glichkeit, den DOM -Inhalt gleichzeitig in einem einzelnen Vorgang zu aktualisieren und Animation Conversion -Effekte zwischen einzelnen DOM -Zust?nden zu generieren. Die Implementierung dies im Internet in der Vergangenheit war sehr schwierig, aber mit dieser neuen API wurde die Transformation ziemlich einfach. Untersuchungen zeigen, dass die Verwendung der API der View Conversion die wahrgenommene Leistung einer Website beschleunigen kann.

Astro unterstützt nativ die Ansichtsumwandlung und verfügt über einen integrierten Fallback-Mechanismus, um Browser zu unterstützen, die diese API derzeit nicht unterstützen.

Diese native L?sung unterstützt integrierte Animationen, Vorder- und Rücknavigationsanimationen sowie die automatische Successity-Unterstützung (über prefers-reduced-motion) und viele andere Funktionen.

Eine der besten M?glichkeiten zur Demo -Sichtkonvertierung besteht darin, ein Videoelement zu verwenden, das seinen Zustand zwischen den Seitenkonvertierungen beibeh?lt. (Beachten Sie, dass wir auch den Zustand zwischen den Komponenten mithilfe der client:* -Richtlinie halten k?nnen.) Das folgende Video zeigt ein Beispiel.

Angenommen, wir haben eine <video></video> -Komponente, die Folgendes enth?lt:

<code>---
// src/components/Video
const src = 'https://res.cloudinary.com/tamas-demo/video/upload/f_auto,q_auto/imagecon/ship.mp4';
const {
  autoplay = false,
  controls = true,
  loop = false
} = Astro.props;
---

<video transition:persist=""></video></code>

Im obigen Code erhalten wir ein Video von Cloudary. Darüber hinaus erlauben wir Videos, nach der Wiedergabe automatisch abzuspielen und zu schleifen, und bieten den Benutzern Steuerschaltfl?chen. Diese Einstellungen werden durch die an diese Videokomponente gesendeten Eigenschaften bestimmt, und wenn diese Eigenschaften nicht bereitgestellt werden, werden die Standardwerte verwendet. Diese Variablen werden dann dem HTML <video></video> -Element hinzugefügt.

Bitte beachten Sie den Befehl transition:persist. Mit diesem Befehl werden wir den Video -Player zwischen überg?ngen behalten: Wenn wir zur n?chsten Seite navigieren, wird das Video weiter gespielt, w?hrend der Rest der Seite aktualisierte Inhalte anzeigt. Wir k?nnen diese Komponente auf den Seiten index.astro und about.astro verwenden:

<code>// src/pages/index.astro
---
import Video from '../components/Video.astro';
---

<video></video></code>

Schlie?lich müssen wir die Seitenkonvertierung aktivieren, die wir für jede Seite oder global für das gesamte Projekt aktivieren k?nnen. Angenommen, wir haben eine Art Layout -Datei, k?nnen wir sie leicht aktivieren, indem wir astro:transitions aus: ViewTransitions importieren

<code>// src/layouts/Layout.astro
---
import { ViewTransitions } from 'astro:transitions';
---



    <title>My site!</title>


    <viewtransitions></viewtransitions>
    <slot></slot>

</code>

Zusammenfassend l?sst sich die experimentelle Ansichtsumwandlungs-API über die visuelle Konvertierung zwischen verschiedenen Seiten oder Elementen durch Snapshots von CSS-Pseudo-Elementen, JavaScript sowie vorder- und hinterher-DOM-Zust?nden vereinfachen. Es bietet eine neue M?glichkeit, die von der Seiten bewusste Leistung zu verbessern und Abh?ngigkeiten von komplexen benutzerdefinierten JavaScript und CSS zu minimieren.

Das obige ist der detaillierte Inhalt vonüberg?nge in Astro anzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!