astro vtbot

Nein, es ist kein Roboter? Es ist ein? B Ag O F T Ricks!

️ einstern, um diese Arbeit zu unterstützen,

Die Tüte Tricks für Astros Sichtübergänge

Die Trickbeutel bietet Erweiterungen und Unterstützung in Bezug auf Astros Sichtübergänge.

Eine aktuelle Bereitstellung von technischen Demos und die Dokumentation finden Sie unter https://events-3bg.pages.dev/

!!! Neue Tricks in der Tasche? !!!

Bringt Ihnen die neueste Version von @vtbag/Element-Crossing mit einer Fehlerbehebung, um data-* Eigenschaften überqueren auf die neue Seite!

Weitere Informationen finden Sie im Changelog des Elementcrossing.

Kürzlich gelernte Tricks

Die Inspektionskammer Devtools funktioniert jetzt für pnpm -Projekte!
Großer Schrei aus und "Danke!" an Lukas für die Bereitstellung dieses Fixes!

Neue Komponente für die durch Browser-nativen Querdokumentansicht Übergänge: Die <CamShaft> -Komponente verhindert den durch Ansichtsübergangsgruppen verursachten pseudo-glatten SCROLL-Effekt, die die Höhe des Ansichtsfensters beim Navigieren zu einer anderen vertikalen Scrollposition überschreiten.

Das <TurnSignal> ermöglicht Astros Vorwärts-/Rückwärtsanimationen, die durch transition:animate mit dem nativen Cross-Do-Dokument @view-transition{} . Optional können Sie die Komponente mit einer Gesamtreihenfolge der Seiten Ihrer Website konfigurieren, sodass sie die Übergangsrichtung automatisch erkennen kann.

Das <ElementCrossing /> ist eine Komponente für diejenigen unter Ihnen, die mit CSS-Übergängen nur mit CSS-Cross-Dokument-Ansicht experimentieren und einen Weg verpassen, den Zustand der HTML-Elemente über die Navigation hinweg zu erhalten: Übertragen Sie den ausgewählten Elementzustand auf die andere Seite!

Inspektionskammer: Sehen Sie sich Ihre Ansicht über die Übergänge wie nie zuvor: Untersuchen Sie jedes Detail, enthüllen, debuggen und optimieren! Bohren Sie nun die Auswirkungen jedes Pseudo-Elements, das durch die View-Übergangs-API eingeführt wurde, und umschalten Sie sogar selektiv einzelne Animationen, um besser zu verstehen, was passiert! Beschwören Sie die Inspektionskammer als Komponente (<InspectionChamber />) oder installieren Sie die Tasche als Integration! und greifen Sie aus der Devtoolbar auf die Kammer zu!

Starlight Support: Wollte schon immer sehen, wie Ihre Starlight -Site mit aktivierten Übergängen der Ansicht aussieht? Befolgen Sie diese Schritte, um die vollständigen Seitenladungen loszuwerden und Ihre Starlight -Site wie ein Spa aussehen zu lassen!

Wiederverwendbare Komponenten?

• Um Erweiterungen für Ansichtsübergänge benötigen, weil Sie Probleme mit IFrames auf Ihren Seiten haben?
• Wollen Sie Unterstützung beim Verständnis und Debuggen von Ansichten oder einfach nur ein zweites Paar Augen? Nach Ihrer Ansicht Übergangseinstellungen?
• Suchen Sie nach wiederverwendbaren Animationen oder speziellen Übergangseffekten?
• Möchten Sie Übergänge auf Ihrer Starlight -Site verwenden?

Das astro-vtbot -Paket ist keine monolithische Bibliothek. Verwenden Sie die Komponenten, die Sie benötigen, und zahlen Sie für diese nur Bandbreite.

Komponente	Brotli -Bytes hinzugefügt
Animationsstil	~ 0,1K
AUTRAMELECTELECT?	~ 0,3K
Bordercontrol?	~ 0,1K
Bremse?	~ 0,2K
Nockenwelle?	~ 0,6 k
Elementcrossing?	~ 1,2K
InspectionChamber?	~ 27k
Linter?	~ 1,9K
Ladeindikator ⏳	~ 0,4k
Bewegen ?	~ 0,2K
Noscroll	~ 0,1K
PageOffset? ⇞	~ 0,1K
Zeigernavigation?	~ 0,1K
Portal?	~ 0,2K
Ersatzwap ↹	~ 0,5 k
Starlight…?	~ 3.0k
Swapsound?	-0,3k
Schwung?	~ 0,1K
Turnsignal?	~ 0,5 k
Vtbotdebug?	~ 2,8K
Zoom?	~ 0,1K

Besuchen Sie die Dokumentation der wiederverwendbaren Komponenten für detaillierte Informationen.

• <Linter/> : Eine Linterkomponente, mit der Sie beim Einrichten von Übergängen Probleme identifizieren können.

• <VtBotDebug/> : Eine Debugging -Komponente, die die Ereignisse und ihre Daten so anzeichnet.

• <ReplacementSwap/> : Ein alterantive DOM SWAP (), der Elemente im ursprünglichen DOM bewahrt, um die Reinitialisierung von IFRames oder CSS -Animationen zu vermeiden.

• <LoadIndicator> : Haben Sie jemals das visuelle Feedback auf Websites mit Ansichtsübergängen übersehen, ob die App den Klick bemerkt hat? Sie benötigen einen Ladeindikator! Bitte schön!

• Zoom , <Move> und Swing -Animationen und die <AnimationsStyle/> -Komponente ermöglichen erweiterte Styling -Optionen.

• <Portal/> Komponente, die alle Ansichtsübergänge über eine Portal-/Ladeseite erzwingen.

• <NoScroll/> Halten Sie die aktuelle vertikale und horizontale Bildlaufposition beim Übergang zur nächsten Seite.

Tech -Demos

Die Trick -Tüte enthält derzeit mehrere technische Demos, die Beispiele für die Implementierung verschiedener Effekte anhand der Ansichtstransitionsereignisse zeigen.

Die Quellen befinden sich in diesem Repository.

Der Jotter?

Last but not least enthält die Bereitstellung auch den ▶ Jotter ◀ mit einer Fülle von Informationen zu Übergangsereignissen sowie Hintergrundinformationen und wertvolle Tipps und Tricks für die Übergänge in Astro.

Einige der Inhalte sind technische Demos, einige sind nützliche Tools und einige sind wiederverwendbare Komponenten, die Sie in Ihrem eigenen Projekt verwenden können, um Kantenfälle zu bewältigen, die über die Standardfunktionen von Astro hinausgehen.

Fehlerbehebung

Hilfe für Hilfe finden Sie in der Registerkarte Discussions im GitHub -Repo.

Beitragen

Dieses Paket wird von Martrapp unabhängig von Astro gepflegt. Sie können einen Beitrag leisten, indem Sie ein Problem einreichen oder eine PR eröffnen!

Changelog

Sehen Sie ChangeLog.md für eine Geschichte von Änderungen an diesem Paket.