astro vtbot
1.0.0
Não, não é um robô?, É um? B AG OF T RICKS !
️Pome Star para apoiar este trabalho
O saco de truques fornece extensões e suporte em torno das transições de visão de Astro.
Uma implantação atual de demos tecnológica e a documentação pode ser encontrada em https://events-3bg.pages.dev/
Traz a você a versão mais recente do @vtbag/element-crossing, com uma correção de bugs para permitir que data-* as propriedades cruzem para a nova página!
Para detalhes, consulte o Changelog do elemento CROSSING.
A câmara de inspeção Devtools agora trabalha para projetos
pnpm!
Grande grito e "Obrigado!" para Lukas por fornecer essa correção!
Novo componente para o documento cruzado nativo do navegador Transições: o componente
<CamShaft>impede o efeito de rolagem pseudo-suave causado por grupos de transição de visão que excedem a altura da visualização ao navegar para uma posição de rolagem vertical diferente.
O
<TurnSignal>permite as animações para frente/para trás da Astro fornecidas pelatransition:animatepara trabalhar com o documento cruzado nativo@view-transition{}. Opcionalmente, você pode configurar o componente com uma ordem total das páginas do seu site, permitindo que ele detecte automaticamente a direção da transição.
O
<ElementCrossing />é um componente para aqueles que experimentam as transições de visualização cruzada somente CSS e perdem uma maneira de preservar o estado dos elementos HTML através da navegação: transfira o estado de elemento selecionado para o outro lado!
Câmara de inspeção: veja sua visualização Transições como nunca antes: Examine todos os detalhes, revele, depra e otimize! Agora, faça uma brilho nos efeitos de cada elemento pseudo-elemento introduzido pela API de transição de visualização e até alterna seletivamente animações individuais para entender melhor o que está acontecendo! Invocar a câmara de inspeção como um componente (<InspeçãoChamber />) ou instale a bolsa como uma integração! e acesse a câmara no devtoolbar !
Suporte à Starlight: Sempre quis ver como é o seu site de estrela com as transições de exibição ativadas? Siga estas etapas para se livrar das cargas de página inteira e faça com que seu site Starlight pareça um spa!
O pacote astro-vtbot não é uma biblioteca monolítica. Use os componentes que você precisa e pague apenas largura de banda para eles.
| Componente | Brotli Bytes adicionados |
|---|---|
| Estilo de animação | ~ 0,1k |
| AutoNameSelected? | ~ 0,3k |
| BorderControl? | ~ 0,1k |
| Freiopad? | ~ 0,2k |
| Eixo de cames? | ~ 0,6k |
| Elementcrossing? | ~ 1,2k |
| InspeçãoChamber? | ~ 27k |
| Linter? | ~ 1,9k |
| LoadingingIndicator ⏳ | ~ 0,4k |
| Mover ? | ~ 0,2k |
| Noscroll | ~ 0,1k |
| Pageoffset? ⇞ | ~ 0,1k |
| PonteronnAvigation? | ~ 0,1k |
| Portal? | ~ 0,2k |
| SubstactemSwap ↹ | ~ 0,5k |
| Starlight…? | ~ 3,0K |
| Swapsound? | -0,3k |
| Balanço ? | ~ 0,1k |
| TornSignal? | ~ 0,5k |
| Vtbotdebug? | ~ 2,8k |
| Zoom? | ~ 0,1k |
Visite a documentação dos componentes reutilizáveis para obter informações detalhadas.
<Linter/> : Um componente Linter que ajuda a identificar problemas ao configurar transições.
<VtBotDebug/> : um componente de depuração que registra os eventos e seus dados à medida que ocorrem.
<ReplacementSwap/> : um DOM alterado Swap (), que preserva os elementos no DOM original para evitar a reinicialização de animações IFRAMES ou CSS.
<LoadIndicator> : Você já perdeu o feedback visual sobre sites com transições de visualização sobre se o aplicativo notou o clique? Você precisa de um indicador de carregamento! Aqui você vai!
Animações de Zoom , <Move> e Swing e o componente <AnimationsStyle/> permite opções de estilo estendido.
<Portal/> Componente que força todas as transições de exibição através de uma página de portal/carregamento.
<NoScroll/> Mantenha a posição de rolagem vertical e horizontal atual ao fazer a transição para a próxima página.
Atualmente, o saco de truques contém vários demos técnicos que mostram exemplos da implementação de vários efeitos usando os eventos de transição de exibição.
As fontes estão neste repositório.
Por último, mas não menos importante, a implantação também inclui o ▶ Jotter ◀ com uma riqueza de informações sobre eventos de transição, além de informações básicas e dicas e truques valiosos nas transições de exibição no Astro.
Alguns dos conteúdos são demonstrações técnicas, outras são ferramentas úteis e outras são componentes reutilizáveis que você pode usar em seu próprio projeto para lidar com casos de borda que vão além dos recursos padrão do Astro.
Para obter ajuda, consulte a guia Discussions no repositório do GitHub.
Este pacote é mantido por Martrapp independentemente do Astro. Você pode contribuir enviando um problema ou abrindo um PR!
Consulte Changelog.md para obter um histórico de alterações neste pacote.
