Hoje, gostaríamos de compartilhar mais sobre o Chrome e a jornada do Astro com a API View Transitions. Isso inclui como a comunidade do Astro adotou e testou a API no início, destacando as possibilidades para a comunidade em geral. Também estamos felizes em compartilhar mais detalhes sobre o novo suporte integrado às transições de visualização no Astro 3.0.
Contexto
As transições entre 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 integradas 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 assustadora. Um dos desafios é lidar com a interação em elementos de saída, o que pode tornar as transições mais complexas.
Além disso, é difícil manter a posição de leitura e o foco para dispositivos adaptativos. E lidar com diferenças na posição de rolagem torna as transições de estado um processo complicado. Todos esses fatores contribuem para a complexidade da implementação de 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 oferece uma maneira mais fácil de mudar o DOM em uma única etapa, criando 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 de suporte a transições para todos os sites, não apenas para aplicativos da Web baseados em JavaScript. Futuras melhorias também estão a caminho. No futuro, o Chrome poderá incluir recursos interessantes, como transições entre documentos, animações controladas pelo compositor, transições com escopo e grupos de transições aninhadas.
Acesse a demonstração: Ao vivo, Origem
Análises 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 frameworks e do Grupo de Trabalho do CSS foram essenciais para moldar o recurso ao longo de vários anos.
A experimentação dos desenvolvedores foi fundamental desde o início. As versões mais antigas da API não ofereciam suporte a animações CSS, e as transições eram restritas a algumas predefinições. O feedback inicial deixou claro que os desenvolvedores queriam que as transições fossem totalmente personalizáveis e expressivas. Essa colaboração garantiu que a API fosse projetada com um bom equilíbrio de padrões, extensibilidade e personalização.
O Astro foi um desses frameworks que se baseou nas transições de visualização no início. O restante deste artigo é do ponto de vista da equipe do Astro e compartilha a experiência deles ao encontrar, adotar e colocar as transições de visualização em primeiro plano na experiência de desenvolvimento da Web.
Por que o Astro aposta nas transições de visualização
O Astro estava procurando algo como transições de visualização há muito tempo. O Astro é um framework da Web em JavaScript que renderiza os componentes da interface em HTML leve para melhorar a performance de carregamento da página. O Astro intencionalmente transfere o máximo possível de trabalho do dispositivo do cliente. Os sites do Astro usam a navegação nativa da página do navegador, enquanto outros frameworks da Web podem substituir a navegação do navegador com o roteamento do lado do cliente do JavaScript.
Essa troca criou um desafio para a equipe do Astro: como ele poderia animar transições de página e oferecer persistência de interface semelhante a um app em todas as páginas sem adotar o roteamento do lado do cliente?
As transições de visualização foram a solução. Com as transições de visualização, o Astro podia oferecer os mesmos recursos de roteamento que os frameworks da Web SPA com muito JavaScript ofereciam, mas sem a sobrecarga de desempenho e complexidade do roteamento do lado do cliente. Outros frameworks abordaram as transições de visualização como um detalhe de implementação opcional, mas para o Astro, foi algo muito maior.
A próxima pergunta que a equipe do Astro teve que responder foi "como?". A equipe buscou inspiração em projetos como Turbo, Swup e Livewire e até mesmo criou protótipos de algumas abordagens semelhantes no Astro.
Uma das primeiras tentativas envolveu uma "transição inteligente" de página inteira que comparava automaticamente cada nova página de HTML com o HTML atual e tentava substituir todos os elementos de uma vez usando JavaScript. Era 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 que o produto complicasse demais as coisas. Depois de assistir a algumas demonstrações iniciais, a equipe do Astro se convenceu da ideia de uma API Astro simples que pudesse corresponder às APIs do navegador o mais próximo possível. Em vez de ver as transições de visualização como um detalhe de implementação invisível oculto 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: trazer a nova API View Transitions para o Astro e oferecer substitutos automáticos que levariam a tantos sites e navegadores quanto possível. O suporte alternativo é essencial, porque a maioria dos navegadores (fora do Chrome) ainda não oferece suporte total às transições de visualização nativas.
Lançamento do suporte oficial no Astro
O Astro lançou o suporte experimental a transições de visualização na versão 2.9. A resposta foi positiva imediatamente. Os desenvolvedores começaram a compartilhar demonstrações incríveis de vários casos de uso diferentes e, em alguns casos, até mesmo para produção.
Acesse a demonstração: Ao vivo, Origem
O Astro 3.0 finaliza o suporte e desativa a nova API View Transitions para todos. Agora você pode adotar essas novas APIs experimentalmente ou todas de uma 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 experimentar a criação de novos recursos na API nativa de transições de visualização. Por exemplo, a nova diretiva transition:persist do Astro permite que qualquer elemento seja mantido em uma navegação de página inteira. Isso permite elementos de longa duração, como players de áudio e vídeo 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, Origem
O Astro também pode deixar as transições de visualização mais ergonômicas para o desenvolvedor. Por exemplo, a equipe já adicionou suporte a animações personalizadas para frente/para trás e animações para HTML dinâmico. Esses dois recursos são difíceis de fazer com as APIs de nível inferior, mas no Astro, eles são praticamente sem esforço.
Por enquanto, esses recursos estão disponíveis apenas no Astro, mas a equipe do navegador espera compartilhar a experiência com os autores da especificação e os grupos de trabalho para possíveis melhorias no futuro. Por exemplo, monitorando de perto uma proposta para facilitar o compartilhamento de animações no CSS.
E agora?
O futuro das transições de visualização na Web é promissor. O Astro, o Nuxt e o HTMX enviaram algum nível de suporte, e muitos outros expressaram interesse.
A equipe do Chrome está muito animada com o suporte nativo do Astro para transições de visualização. É um grande avanço para o desenvolvimento da Web, permitindo experiências de usuário mais fluidas e dinâmicas. Recomendamos que os desenvolvedores se aprofundem nas transições de visualização no Astro 3.0. Seja para criar novas páginas de destino ou atualizar sites existentes, essas melhorias são transformadoras. As transições de visualização 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. Sinta-se à vontade para comentar no repositório do GitHub View Transitions WICG para discutir mais sobre isso.
Já nos inspiramos com as demonstrações e os aplicativos inovadores que vimos e estamos ansiosos para ver mais. Seu trabalho com transições de visualização está moldando o futuro da Web. Teste as transições de visualização no Astro, compartilhe seu trabalho e vamos continuar essa jornada juntos.