Übergänge in Astro anzeigen

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!