Hoje queremos compartilhar mais informações sobre a jornada do Chrome e do Astro com a API View Transitions. Isso inclui como a comunidade Astro adotou e testou a API desde o início, destacando as possibilidades para a comunidade em geral. Também estamos felizes em compartilhar mais sobre o novo suporte integrado para transições de visualização no Astro 3.0.
Contexto
As transições perfeitas entre os diferentes estados de uma página, conhecidas como transições de estado, sempre foram um aspecto complexo da criação de experiências animadas e contínuas na Web. Apesar da disponibilidade de ferramentas como transições CSS, animações CSS e a API Web Animation, a criação de transições de estado continua sendo uma tarefa desafiadora. Um dos desafios é lidar com interações em elementos de saída, o que pode tornar as transições mais complexas.
Além disso, manter a posição de leitura e o foco para dispositivos assistivos é difícil. Além disso, lidar com as diferenças de posição de rolagem torna as transições de estado um processo complicado. Todos esses fatores contribuem para a complexidade de implementar transições suaves entre vários elementos em uma página da Web
A API View Transitions surgiu como a solução do navegador para esses desafios. Essa nova API fornece uma maneira mais fácil de alterar o DOM em uma única etapa, ao mesmo tempo que cria uma transição animada entre dois estados.
O lançamento da API View Transitions no Chrome 111 marcou o início de uma visão mais ampla do suporte de transição para todos os sites, não apenas aplicativos da Web baseados em JavaScript. Futuras melhorias também estão a caminho. No futuro, o Chrome poderá explorar adições interessantes, como transições entre documentos, animações orientadas por compositor, transições com escopo e grupos de transição aninhados.
Acesse a demonstração: Ao vivo, Fonte
Explorações iniciais com transições de visualização
A jornada do Chrome com a API View Transitions não foi solitária. O feedback e a colaboração de desenvolvedores, autores de estruturas e o grupo de trabalho do CSS tiveram um papel crucial na criação do recurso ao longo de vários anos.
A experimentação dos desenvolvedores teve um papel fundamental desde o início. As versões mais antigas da API não eram compatíveis com animações CSS, e as transições estavam restritas a algumas predefinições restritivas. O feedback inicial deixou claro que os desenvolvedores queriam que as transições fossem totalmente personalizáveis e expressivas. Essa colaboração constante garantiu o design da API com um equilíbrio entre bons padrões, extensibilidade e personalização.
O Astro foi uma das estruturas que adotaram as transições de visualização desde o início. O restante deste artigo é do ponto de vista da equipe do Astro e compartilha sua experiência em encontrar, adotar e implantar as transições de visualização em primeiro lugar na experiência de desenvolvimento da Web.
Por que o Astro aposta nas transições de visualização
O Astro procura por algo como as transições de visualizações há muito tempo. Astro é uma estrutura da Web de JavaScript que renderiza componentes de IU em HTML leve no servidor para agilizar o carregamento da página. O Astro retira intencionalmente o máximo de trabalho possível do dispositivo cliente. Os sites Astro usam a navegação nas páginas do navegador nativo, em que outras estruturas da Web podem invadir a navegação do navegador com roteamento JavaScript do lado do cliente.
Isso criou um desafio para a equipe do Astro: como o Astro poderia animar as transições de página e fornecer persistência de IU semelhante a um aplicativo em várias páginas sem adotar o roteamento do lado do cliente?
As transições de visualizações foram a resposta. Com as transições de visualizações, o Astro oferece os mesmos recursos de roteamento que os frameworks da Web de SPA com uso intenso de JavaScript ofereciam JavaScript, mas sem o alto desempenho e a complexidade do roteamento no lado do cliente. Outros frameworks abordaram as transições de visualizações como um detalhe de implementação opcional, mas para Astro isso era muito maior.
A próxima pergunta que a equipe do Astro teve que responder era: “como?” A equipe procurou projetos como Turbo, Swup e Livewire para se inspirar e até mesmo prototipou algumas abordagens semelhantes dentro do Astro.
Uma das primeiras tentativas envolvia uma “transição inteligente” de página inteira, que comparava automaticamente cada nova página de HTML com o HTML atual e tentava substituir cada elemento de uma só vez usando JavaScript. Foi inteligente, mas propenso a erros.
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
Felizmente, a comunidade do Astro mostrou que a API View Transitions já era poderosa sem complicar demais o produto. Depois de ver algumas demonstrações iniciais, a equipe do Astro se convenceu da ideia de uma API simples do Astro que pudesse corresponder o máximo possível às APIs do navegador. Em vez de ver as transições de visualização como um detalhe de implementação invisível escondido no Astro, elas podem ser expostas diretamente ao desenvolvedor. Alinhar o Astro diretamente com a plataforma da Web e reduzir a complexidade geral no front-end.
---
// Add a simple fade transition with 2 lines of code!
// 1. Import the <ViewTransitions> component
// 2. Add it to your common/base head component, or individual pages.
import { ViewTransitions } from 'astro:transitions';
---
<head>
<title>My View Transitions Demo</title>
<ViewTransitions />
</head>
<!-- ... -->
O trabalho ficou simples: coloque a nova API View Transitions no Astro e forneça substitutos automáticos para o maior número possível de sites e navegadores. O suporte a substitutos é essencial, porque a maioria dos navegadores (fora do Chrome) ainda não oferece suporte completo para transições de visualização nativas.
Lançamento do suporte oficial no Astro
A Astro lançou o suporte experimental a View Transitions no Astro 2.9. A resposta foi positiva imediatamente. Os desenvolvedores começaram a compartilhar demonstrações incríveis de diversos casos de uso e, em alguns casos, até mesmo enviar tudo para produção.
Acesse a demonstração: Ao vivo, Fonte
O Astro 3.0 finaliza o suporte e remove a sinalização da nova API View Transitions para todos. Essas novas APIs estão prontas para serem adotadas de forma experimental ou de uma só vez.
<main transition:animate="slide">
<p>Slide animation as you navigate to and from the page!</p>
</main>
<aside transition:name="my-aside">
<p>Animate and morph the matching "my-aside" element across pages automatically!</p>
</aside>
Um benefício inesperado de alinhar o Astro com as APIs da plataforma é a capacidade de testar a criação de novos recursos usando a API View Transitions nativa. Por exemplo, a nova diretiva transition:persist do Astro permite que qualquer elemento persista em uma navegação de página inteira. Isso potencializa elementos de longa duração, como players de vídeo e áudio persistentes, algo que só era possível em SPAs JavaScript pesados.
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
Acesse a demonstração: Ao vivo, Fonte
O Astro também é sem custo financeiro para tornar as transições de visualização mais ergonômicas para o desenvolvedor. Por exemplo, a equipe já adicionou suporte a animações personalizadas de avanço e retorno e animações para HTML dinâmico. Esses dois recursos são difíceis de fazer apenas com as APIs de nível inferior, mas no Astro eles são praticamente simples.
Por enquanto, esses recursos estão disponíveis apenas no Astro, mas a equipe do Astro espera proporcionar essa experiência aos autores das especificações e aos grupos de trabalho para possíveis melhorias do navegador no futuro. Por exemplo, monitore de perto uma proposta para facilitar o compartilhamento de animações no CSS.
E agora?
O futuro das transições de visualizações na Web é promissor. A Astro, a Nuxt e a HTMX já ofereceram algum tipo de suporte, e muitas outras demonstraram interesse.
A equipe do Chrome está muito feliz com o suporte nativo para transições de visualização do Astro. Isso é um grande passo para o desenvolvimento da Web, permitindo experiências do usuário mais fluidas e dinâmicas. Recomendamos que os desenvolvedores conheçam as transições de visualização no Astro 3.0. Seja criando novas páginas de destino ou atualizando sites, essas melhorias são revolucionárias. As transições de visualizações ajudaram a preencher uma lacuna entre o que era possível com SPAs e MPAs. O Chrome gostaria de saber se há outras lacunas no suporte a SPA e/ou MPA. Fique à vontade para comentar no repositório "Ver transições do WICG no GitHub (link em inglês) para discutir esse assunto com mais detalhes.
Já somos inspirados pelas demonstrações e aplicativos inovadores que vimos e estamos ansiosos para ver mais. Seu trabalho com as transições de visualizações está moldando o futuro da Web. Teste as transições de visualização no Astro, compartilhe seu trabalho e vamos continuar essa jornada juntos.