astro vtbot
1.0.0
Non, ce n'est pas un robot ?, c'est un? B AG Of T RICKS!
️Velez l'étoile pour soutenir ce travail.
Le sac d'astuces fournit des extensions et un soutien autour des transitions de vue d'Astro.
Un déploiement actuel de démos technologiques et de la documentation se trouvent sur https://events-3bg.pages.dev/
Vous apporte la dernière version de @ vtbag / élément de croisement, avec un correctif de bogue pour laisser data-* les propriétés se précipitent vers la nouvelle page!
Pour plus de détails, consultez le changelog de l'élémentcrossing.
La chambre d'inspection Devtools a désormais une ALS travaille pour les projets
pnpm!
Grand cri et "Merci!" à Lukas pour avoir fourni ce correctif!
Nouveau composant pour les transitions de vue transversale native du navigateur: le composant
<CamShaft>empêche l'effet de défilement pseudo-lisse causé par des groupes de transition de vue qui dépassent la hauteur de la fenêtre lors de la navigation vers une position de défilement verticale différente.
Le
<TurnSignal>permet aux animations avant / arrière d'Astro fournies partransition:animatepour travailler avec un transition transversal natif@view-transition{}. En éventuellement, vous pouvez configurer le composant avec une commande totale des pages de votre site, ce qui lui permet de détecter automatiquement la direction de transition.
Le
<ElementCrossing />est un composant pour ceux d'entre vous qui expérimentent les transitions de vue inter-documents CSS uniquement et manquent un moyen de préserver l'état des éléments HTML à travers la navigation: transférez l'état d'élément sélectionné de l'autre côté!
Chambre d'inspection: Voir vos transitions de vue comme jamais auparavant: examinez chaque détail, révélez, déboguez et optimisez! Maintenant, explorez les effets de chaque pseudo-élément introduit par l'API de transition de la vue et même bascule sélectivement les animations individuelles pour mieux comprendre ce qui se passe! Invoquez la chambre d'inspection en tant que composant (<inspectionchamber />) ou installez le sac comme intégration! Et accédez à la chambre depuis le Devtoolbar !
Support de Starlight: Ever Ye’il voulait voir à quoi ressemble votre site Starlight avec les transitions de vue activées? Suivez ces étapes pour vous débarrasser des charges pleine page et faites ressembler votre site Starlight à un spa!
Le package astro-vtbot n'est pas une bibliothèque monolithique. Utilisez les composants dont vous avez besoin et ne payez que la bande passante pour ceux-ci.
| Composant | BOTLES BROTLI AJOUTÉE |
|---|---|
| Style d'animation | ~ 0,1k |
| AutoLaMeled? | ~ 0,3k |
| BorderControl? | ~ 0,1k |
| Pavé de frein? | ~ 0,2k |
| Arbre à cames? | ~ 0,6k |
| Élémentcrossing? | ~ 1,2k |
| InspectionChamber? | ~ 27K |
| Linter? | ~ 1,9k |
| ChargeingIndicator ⏳ | ~ 0,4k |
| Se déplacer ? | ~ 0,2k |
| Noscroll | ~ 0,1k |
| PageOffset? ⇞ | ~ 0,1k |
| Pointeronnavigation? | ~ 0,1k |
| Portail? | ~ 0,2k |
| Remplacementwap ↹ | ~ 0,5k |
| Starlight…? | ~ 3,0k |
| Swapsound? | -0,3k |
| Balançoire ? | ~ 0,1k |
| Turnsignal? | ~ 0,5k |
| Vtbotdebug? | ~ 2,8k |
| Zoom? | ~ 0,1k |
Visitez la documentation des composants réutilisables pour des informations détaillées.
<Linter/> : un composant Linter qui vous aide à identifier les problèmes lors de la configuration des transitions.
<VtBotDebug/> : un composant de débogage qui enregistre les événements et leurs données lorsqu'ils se produisent.
<ReplacementSwap/> : Un Dom swap altérant (), qui préserve les éléments dans le DOM d'origine pour éviter la réinitialisation des animations IFRAMES ou CSS.
<LoadIndicator> : Avez-vous déjà manqué les commentaires visuels sur les sites avec des transitions de vue pour savoir si l'application a remarqué le clic? Vous avez besoin d'un indicateur de chargement! Voici!
Les animations Zoom , <Move> et Swing et le composant <AnimationsStyle/> permettent des options de style étendues.
<Portal/> Composant qui force toutes les transitions de vue via une page portail / chargement.
<NoScroll/> Gardez la position de défilement verticale et horizontale actuelle lors de la transition vers la page suivante.
Le sac d'astuces contient actuellement plusieurs démos techniques qui montrent des exemples de la mise en œuvre de divers effets à l'aide des événements de transition de vue.
Les sources sont dans ce référentiel.
Enfin et surtout, le déploiement comprend également le ▶ Jotter ◀ avec une multitude d'informations sur les événements de transition ainsi que des informations générales et des conseils et astuces précieux sur les transitions dans Astro.
Certains contenus sont des démos techniques, certains sont des outils utiles et certains sont des composants réutilisables que vous pouvez utiliser dans votre propre projet pour gérer les cas de bord qui vont au-delà des fonctionnalités standard d'Astro.
Pour obtenir de l'aide, consultez l'onglet Discussions sur le dépôt GitHub.
Ce package est maintenu par Martrapp indépendamment d'Astro. Vous êtes invités à contribuer en soumettant un problème ou en ouvrant un RP!
Voir ChangeLog.md pour un historique de modifications à ce package.
