astro vtbot
1.0.0
No, ¿ no es un robot?, ¿Es A? B ag o f t ricks!
"Por favor, Star para apoyar este trabajo.
La bolsa de trucos proporciona extensiones y soporte alrededor de las transiciones de vista de Astro.
Se puede encontrar una implementación actual de demostraciones tecnológicas y la documentación en https://events-3bg.pages.dev/
Le trae la última versión de @vtbag/elemento-crossing, con una solución de errores para dejar que las propiedades data-* se crucen a la nueva página!
Para más detalles, consulte el CangeLog de ElementCrossing.
¡La cámara de inspección Devtools ahora también trabaja para proyectos
pnpm!
Gran grito y "¡Gracias!" ¡A Lukas por proporcionar esta solución!
Nuevo componente para las transiciones de vista de documento cruzado nativo del navegador: el componente
<CamShaft>evita el efecto pseudo-suave-scroll causado por los grupos de transición de la vista que exceden la altura de la vista al navegar a una posición de desplazamiento vertical diferente.
El
<TurnSignal>habilita las animaciones de avance/retroceso de Astro proporcionadas portransition:animatepara funcionar con el documento cruzado nativo@view-transition{}. Opcionalmente, puede configurar el componente con un pedido total de las páginas de su sitio, lo que le permite detectar automáticamente la dirección de transición.
El
<ElementCrossing />es un componente para aquellos de ustedes que experimentan con las transiciones de vista cruzado de Documento solo CSS y se pierden una forma de preservar el estado de los elementos HTML a través de la navegación: ¡Transfiera el estado de elemento seleccionado al otro lado!
Cámara de inspección: vea las transiciones de su vista como Never Before: ¡Examine cada detalle, revele, depurar y optimizar! Ahora, profundice en los efectos de cada pseudo-elemento introducido por la API de transición View e incluso alterne selectivamente animaciones individuales para comprender mejor lo que está sucediendo. ¡Invoca la cámara de inspección como un componente (<InspectionChamber />) o instale la bolsa como integración! ¡Y acceda a la cámara desde Devtoolbar !
Soporte de Starlight: ¿Alguna vez quise ver cómo se veía su sitio de Starlight con las transiciones de vista habilitadas? ¡Siga estos pasos para deshacerse de las cargas de página completa y hacer que su sitio de Starlight se vea como un spa!
El paquete astro-vtbot no es una biblioteca monolítica. Use los componentes que necesita y solo paga el ancho de banda para ellos.
| Componente | Bytes brotli agregados |
|---|---|
| Estilo de animación | ~ 0.1K |
| Autonameselected? | ~ 0.3k |
| BorderControl? | ~ 0.1K |
| Brakapad? | ~ 0.2k |
| Árbol de levas? | ~ 0.6k |
| ElementCrossing? | ~ 1.2k |
| InspectionCamber? | ~ 27k |
| Linter? | ~ 1.9k |
| Loadingindicator ⏳ | ~ 0.4k |
| Mover ? | ~ 0.2k |
| Noscroll | ~ 0.1K |
| PageOffset? ⇞ | ~ 0.1K |
| Pointeronnavigation? | ~ 0.1K |
| Portal? | ~ 0.2k |
| Swap de reemplazo ↹ | ~ 0.5k |
| ¿Starlight ...? | ~ 3.0k |
| ¿SwapsOUND? | -0.3k |
| Balancearse ? | ~ 0.1K |
| Turnsignal? | ~ 0.5k |
| Vtbotdebug? | ~ 2.8k |
| Zoom ? | ~ 0.1K |
Visite la documentación de los componentes reutilizables para obtener información detallada.
<Linter/> : un componente de la linter que le ayuda a identificar problemas al configurar las transiciones.
<VtBotDebug/> : un componente de depuración que registra los eventos y sus datos a medida que ocurren.
<ReplacementSwap/> : un swap DOM alterantivo (), que preserva elementos en el DOM original para evitar la reinicialización de las animaciones IFRAMES o CSS.
<LoadIndicator> : ¿Alguna vez se ha perdido los comentarios visuales en los sitios con las transiciones de la vista sobre si la aplicación ha notado el clic? ¡Necesitas un indicador de carga! ¡Aquí tienes!
Zoom , <Move> y Swing Animations y el componente <AnimationsStyle/> permite opciones de estilo extendidas.
<Portal/> que obliga a todas las transiciones de la vista a través de una página de portal/carga.
<NoScroll/> Mantenga la posición actual de desplazamiento vertical y horizontal al hacer la transición a la página siguiente.
La bolsa de trucos actualmente contiene varias demostraciones técnicas que muestran ejemplos de la implementación de varios efectos utilizando los eventos de transición View.
Las fuentes están en este repositorio.
Por último, pero no menos importante, el despliegue también incluye el ▶ Jotter ◀ con una gran cantidad de información sobre eventos de transición, así como información de fondo y valiosos consejos y trucos a la vista de las transiciones en Astro.
Algunos de los contenidos son demostraciones técnicas, algunas son herramientas útiles y otras son componentes reutilizables que puede usar en su propio proyecto para manejar casos de borde que van más allá de las características estándar de Astro.
Para obtener ayuda, consulte la pestaña Discussions en el repositorio de GitHub.
Este paquete es mantenido por Martrapp independientemente de Astro. ¡Bienvenido a contribuir enviando un problema o abriendo un PR!
Consulte ChangeLog.md para un historial de cambios en este paquete.
