No Google I/O 2024, anunciei a próxima etapa das transições de visualização: as transições entre documentos para aplicativos de várias páginas (MPA, na sigla em inglês).
Além disso, compartilhei algumas melhorias que permitem que você trabalhe mais facilmente com transições de visualização em geral.
- Compartilhamento de estilos de animação entre pseudoelementos de transição de visualização com
view-transition-class. - Transições de visualização seletivas com tipos ativos.
Essas melhorias se aplicam às transições de visualização do mesmo documento em aplicativos de página única (SPA) e às transições de visualização entre documentos no MPA.
Transições de visualização entre documentos para MPAs
No Chrome 111, a equipe do Chrome lançou transições de visualização do mesmo documento para aplicativos de página única, um recurso muito recebido pela comunidade de criação na Web.
É ótimo ver o que muitos de vocês criaram com as transições de visualização. Variando de implementações típicas que "fazem com que a miniatura se torne uma foto grande" até experiências imersivas altamente personalizadas, como esta do Airbnb. Incrível!
No entanto, a implementação inicial exigiu que você criasse um SPA para usar as transições de visualização. No Chrome 126, isso não acontece mais. As transições de visualização são ativadas por padrão para navegações de mesma origem. Agora é possível criar uma transição de visualização entre dois documentos diferentes de mesma origem.
Para ativar as transições de visualização entre documentos, as duas extremidades precisam aceitar. Para fazer isso, use a at-rule @view-transition e defina o descritor navigation como auto.
@view-transition {
navigation: auto;
}
As transições de visualização entre documentos usam os mesmos elementos básicos e princípios das transições de visualização do mesmo documento. Os elementos com uma view-transition-name aplicada são capturados, e é possível personalizar as animações usando animações CSS.
Para personalizar as transições de visualização entre documentos, use os eventos pageswap e pagereveal, que dão acesso ao objeto de transição de visualização.
- Com o
pageswap, é possível fazer algumas mudanças de última hora na página de saída antes de os snapshots antigos serem criados. - Com
pagereveal, é possível personalizar a nova página antes que ela comece a ser renderizada depois de ter sido inicializada.
Nos dois eventos, você tem acesso a um objeto NavigationActivation para personalizar uma transição de visualização entre documentos com base nas entradas novas e antigas do histórico de destino ou no tipo de navegação.
Para completar, aguarde o conteúdo ser carregado com o bloqueio de renderização e use a pré-renderização para melhorar o tempo de carregamento antes que a transição de visualização seja executada.
Demonstração
Esta demonstração do Stack Navigator combina todos esses recursos e algumas melhorias.
pagereveal com base nas informações de ativação da navegação. A pré-renderização também é usada.Este é um MPA com navegações de documentos cruzados, hospedados na mesma origem. Ao usar pagereveal, o tipo de animação é determinado com base nas entradas antigas e novas do histórico de destino.
window.addEventListener("pagereveal", async (e) => {
if (e.viewTransition) {
// Determine animation type based on the old/new history entries
const transitionClass = determineTransitionClass(navigation.activation.from, navigation.currentEntry);
document.documentElement.dataset.transition = transitionClass;
// Cleanup after transition ran
await e.viewTransition.finished;
delete document.documentElement.dataset.transition;
}
});
Leia a documentação
Para mais informações sobre como ativar e personalizar as transições de visualização entre documentos, consulte nossa documentação sobre as transições de visualização entre documentos.
Melhorias nas transições de visualização
Além de lançar transições de visualização entre documentos para o MPA, o Chrome também inclui alguns refinamentos para trabalhar com transições de visualização em geral.
Essas melhorias se aplicam às transições de visualização do mesmo documento para SPA e entre documentos para o MPA.
Compartilhar estilos de animação com view-transition-class
Compatibilidade com navegadores
- 125
- 125
- x
- x
Até agora, ao animar vários snapshots da mesma maneira, era necessário segmentar cada snapshot individualmente, repetindo o pseudosseletor para cada elemento que tivesse um view-transition-name exclusivo.
Com view-transition-class, agora é possível adicionar um nome compartilhado a todos os snapshots. Use esse nome compartilhado nos pseudosseletores para segmentar todos os snapshots correspondentes. Isso resulta em seletores muito mais simples, que são dimensionados automaticamente de um a vários elementos.
#cards-wrapper > div {
view-transition-class: card;
}
html::view-transition-group(.card) {
animation-timing-function: var(--bounce);
}
O exemplo de card a seguir usa view-transition-class para aplicar o mesmo tempo de animação a várias capturas de tela usando um seletor.
view-transition-class, o mesmo animation-timing-function é aplicado a todos os cartões, exceto os adicionados ou removidos.Para saber mais sobre view-transition-class, leia a documentação dedicada sobre view-transition-class.
Transições de visualização seletiva com tipos ativos
Outro refinamento das transições de visualização é a introdução de adicionar tipos a uma transição de visualização ao capturá-la e executá-la. Isso facilita o trabalho com várias transições de visualização na mesma página, sem que as declarações de uma delas alterem a outra.
Por exemplo, ao ir para a página seguinte ou anterior em uma sequência de paginação, convém usar animações diferentes, dependendo se você está indo para uma página superior ou inferior na sequência.
Antes dos tipos ativos, você poderia adicionar classes ao DOM e responder a essas classes no CSS. No entanto, também era necessário fazer a limpeza após a conclusão das transições.
Com os tipos de transição de visualização, você pode alcançar o mesmo resultado, mas o benefício adicional desses tipos é limpo automaticamente quando a transição de visualização é concluída. Os tipos se aplicam somente ao capturar ou realizar a transição.
Para transições de visualização do mesmo documento, transmita o types para o método startViewTransition, que agora aceita um objeto. update é a função de callback que atualiza o DOM, e types é uma sequência de strings.
const direction = determineBackwardsOrForwards();
const t = document.startViewTransition({
update: updateTheDOMSomehow,
types: ['slide', direction],
}););
Para uma transição de visualização entre documentos, defina tipos na at-rule @view-transition usando o descritor types ou defina-os rapidamente nos eventos pageswap e pagereveal.
@view-transition {
navigation: auto;
types: slide, forwards;
}
Com os tipos definidos, é possível responder a esses tipos no CSS usando os seletores de pseudoclasse :active-view-transition-type() e :active-view-transition, que se aplicam à raiz de transição de visualização.
/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
&::view-transition-old(content) {
animation-name: slide-out-to-left;
}
&::view-transition-new(content) {
animation-name: slide-in-from-right;
}
}
Para saber mais sobre os tipos de transição de visualização, consulte a documentação dedicada para transições de visualização do mesmo documento e transições de visualização entre documentos.
Feedback
O feedback dos desenvolvedores é sempre bem-vindo. Para fazer isso, registre um problema com o CSS Working Group no GitHub com sugestões e perguntas. Adicione o prefixo [css-view-transitions] ao problema.
Se ocorrer um bug, registre um bug do Chromium.