In diesem Leitfaden erfahren Sie, wie Sie die GreenSock Animation Platform (GSAP) in einer Astro-Anwendung mit aktivierten View Transitions verwenden. Sie durchlaufen den Prozess der Einrichtung eines neuen Astro-Projekts, der Aktivierung von View Transitions, der Installation des Gsap-Moduls und der Animation eines Textfeld basierend auf dem Status eines Kontrollkästchens
Voraussetzungen
Sie benötigen Folgendes:
- Nodejs 18 oder höher
Inhaltsverzeichnis
- Eine neue Astro-Anwendung erstellen
- Integrieren Sie die GreenSock Animation Platform (GSAP) in Ihr Astro-Projekt
- Erstellen und testen Sie Ihre Astro-Anwendung lokal
Erstellen Sie eine neue Astro-Anwendung
Beginnen wir mit der Erstellung eines neuen Astro-Projekts. Führen Sie den folgenden Befehl aus:
npm create astro@latest my-app„npm create astro“ ist die empfohlene Methode, um ein Astro-Projekt schnell zu erstellen
Wenn Sie dazu aufgefordert werden, wählen Sie:
- „Leer“, wenn Sie gefragt werden, wie das neue Projekt gestartet werden soll
- „Ja“, wenn Sie gefragt werden, ob Sie Typescript schreiben möchten
- „Streng“, wenn Sie gefragt werden, wie streng Typescript sein soll
- „Ja“, wenn Sie aufgefordert werden, Abhängigkeiten zu installieren
- „Ja“, wenn Sie aufgefordert werden, ein Git-Repository zu initialisieren
Sobald das erledigt ist, können Sie in das Projektverzeichnis wechseln und die App starten:
cd my-appnpm run devDie App sollte auf localhost:4321 ausgeführt werden.
Kommen wir nun zur Integration von GSAP in Ihre Astro-Anwendung
Integrieren Sie die GreenSock Animation Platform (GSAP) in Ihr Astro-Projekt
Installieren Sie das GreenSock Animation Platform (GSAP) SDK
Führen Sie den folgenden Befehl aus, um das erforderliche Paket für die Verwendung von GSAP zu installieren:
npm install gsapDer Befehl installiert die folgende Bibliothek:
- „gsap“: Eine Framework-unabhängige JavaScript-Animationsbibliothek
Erstellen Sie eine gemeinsame Layoutkomponente mit Ansichtsübergängen und GSAP
Um GSAP auf mehreren Seiten Ihrer Astro-Anwendung mit aktiviertem ViewTransitions zu verwenden, erstellen Sie ein gemeinsames Layout, um die Zeit zu sparen, die mit der Wiederholung desselben Codes auf jeder Seite verbunden ist. Erstellen Sie eine Datei mit dem Namen „Layoutastro“ im Verzeichnis „src“ mit dem Folgenden Code:
---import { ViewTransitions } from "astro:transitions";---// [!code focus]<html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <meta name="viewport" content="width=device-width" /> <meta name="generator" content={Astro.generator} /> <ViewTransitions /> <title>Astro</title> <style is:global> .box { width: 100px; height: 100px; background: black; } </style> </head> <body> <slot /> <script> import gsap from "gsap"; window.gsap = gsap; </script> </body></html>Im obigen Code haben Sie Folgendes getan, um gsap überall wiederverwenden zu können:
- Importierte
ViewTransitionsund verwendete es innerhalb des<html lang="en">-Tags, um Ihren Seiteninhalt ohne die normale, ganzseitige Navigation des Browsers zu aktualisieren auffrischen - Definierte ein CSS, um visuell eine 100x100 große Blackbox zu erstellen
- Das gsap-Modul importiert und innerhalb des Fensters zugänglich gemacht. Jetzt können Sie auf jeder in dieses Layout eingeschlossenen Seite „gsapto“ aufrufen und erwarten, dass es genauso funktioniert, wie es auch in einem Inline-Skript ist. Beachten Sie, dass gebündelte Skripte ausgeführt werden nur einmal, wenn Ansichtsübergänge aktiviert sind. Dies ist hilfreich für Sie, da Sie das Gsap-Modul nicht auf jeder Seite importieren und laden müssen
Wie Giulio Zanchetta richtig vorgeschlagen hat, aktualisieren Sie „src/envdts“, um die seitenübergreifende Unterstützung von Gsap-Typen an einer beliebigen Stelle im Skript-Tag sicherzustellen:
/// <reference path="../.astro/types.d.ts" />/// <reference types="astro/client" />interface Window { // [!code focus] gsap: typeof import("gsap");}GSAP auf mehreren Seiten verwenden
Um die Verwendung von GSAP zu demonstrieren, animieren Sie ein Kästchen nach links, rechts, oben und unten, basierend auf dem aktivierten Status eines Kontrollkästchens auf mehreren Seiten
Erstellen wir zunächst das Kästchen und das Kontrollkästchen in der Standardindexroute. Auf dieser Seite animieren Sie das Kästchen von links nach rechts, wenn das Kontrollkästchen aktiviert ist. Ersetzen Sie den vorhandenen Code in der Datei „src/pages/indexastro“ durch Folgendes:
---import Layout from "../Layout.astro";---// [!code focus]<Layout> <h1>Astro</h1> <input type="checkbox" /> <div class="box"></div> <a href="/second">Click Me</a></Layout>Im obigen Code haben Sie ein Kontrollkästchen und ein div-Element erstellt, das das Kästchen darstellt. Außerdem haben Sie einen Hyperlink zur Route „/second“ hinzugefügt
Erstellen Sie nun eine Sekundeastro“ im Verzeichnis „src/pages“ mit dem folgenden Code, in dem Sie das Feld nach oben und unten animieren, wenn das Kontrollkästchen aktiviert ist:
---import Layout from "../Layout.astro";---// [!code focus]<Layout> <h1>Astro</h1> <input type="checkbox" /> <div class="box"></div> <a href="/">Click Me</a></Layout>Im obigen Code haben Sie ein Kontrollkästchen und ein div-Element erstellt, das das Kästchen darstellt. Außerdem haben Sie einen Hyperlink zur Route „/“ hinzugefügt
Um nun das Feld mit GSAP zu animieren, wenn das Kontrollkästchen angeklickt wird, nehmen Sie die folgenden Ergänzungen in einer der Routen vor:
---import Layout from "../Layout.astro";---// [!code focus]<Layout> <h1>Astro</h1> <input type="checkbox" /> <div class="box"></div> <a href="/second">Click Me</a> <script> document.addEventListener( "astro:page-load", () => { const element = document.querySelector('[type="checkbox"]'); element?.addEventListener("change", () => { if (element.checked) gsap.to(".box", { x: 200 }); else gsap.to(".box", { x: 0 }); }); }, { once: false } ); </script></Layout>und die folgende Änderung in der anderen Route:
---import Layout from "../Layout.astro";---// [!code focus]<Layout> <h1>Astro</h1> <input type="checkbox" /> <div class="box"></div> <a href="/">Click Me</a> <script> document.addEventListener( "astro:page-load", () => { const element = document.querySelector('[type="checkbox"]'); element?.addEventListener("change", () => { if (element.checked) gsap.to(".box", { y: 200 }); else gsap.to(".box", { y: 0 }); }); }, { once: false } ); </script></Layout>In den oben genannten Ergänzungen haben Sie einen Ereignis-Listener für das „Change“-Ereignis des Kontrollkästchens erstellt. Dieses Ereignis wird immer dann ausgelöst, wenn das Kontrollkästchen aktiviert oder deaktiviert ist. Außerdem animieren Sie je nach Status des Kontrollkästchens entweder die Schaltfläche zum Verschieben 200 Einheiten nach rechts, oder kehren Sie zur ursprünglichen Position zurück
Beachten Sie, dass der Ereignis-Listener „change“ in den folgenden Code eingebettet ist:
document.addEventListener( "astro:page-load", () => { }, { once: false });Der obige Code stellt sicher, dass er bei jedem Besuch der Seite, die ihn enthält, im Browser ausgeführt wird, sei es beim Navigieren oder beim ersten Laden. Damit der Listener nach der Navigation zu einer neuen Seite oder beim direkten Öffnen einer Seite an das Box-Element angehängt werden kann geladen ist, ist das Ereignis astro:page-load praktisch. Außerdem stellt die Verwendung von Once: False sicher, dass der darin enthaltene Code korrekt ist -ran, wenn die Seite während einer Sitzung mehrmals besucht wird
Erstellen und testen Sie Ihre Astro-Anwendung lokal
Um die Anwendung zu testen, bereiten Sie einen Build vor und führen Sie den Vorschauserver mit dem folgenden Befehl aus:
npm run build && npm run previewAbschluss
In dieser Anleitung haben Sie erfahren, wie Sie die GreenSock Animation Platform (GSAP) in einer Astro-Anwendung mit aktivierten Ansichtsübergängen verwenden
Wenn Sie Fragen oder Kommentare haben, können Sie mich gerne auf Twitter.
Credits
– Vielen Dank an Martin für eine detaillierte Überprüfung und die Lösungsvorschläge in diesem Artikel
