O que há de novo nas transições de visualização? (atualização do Google I/O 2024)

Bramus

No Google I/O 2024 (em inglês), anunciamos a próxima etapa das transições de visualização: as transições de visualização entre documentos para aplicativos de várias páginas (MPA, na sigla em inglês).

Além disso, compartilhei algumas melhorias que facilitam o trabalho com as transições de visualização em geral.

• Compartilhar estilos de animação entre pseudoelementos de transição de visualização usando view-transition-class.
• Transições de visualização seletiva com tipos ativos.

Essas melhorias se aplicam às transições de visualização de um mesmo documento para aplicativos de página única (SPA) e transições de visualização de vários documentos para a MPA.

Transições de visualização entre documentos para MPAs

No Chrome 111, a equipe do Chrome lançou transições de visualização de um mesmo documento para aplicativos de página única, um recurso bem recebido pela comunidade de criação da Web.

É ótimo ver o que muitos de vocês criaram com as transições de visualização. Variando das implementações típicas que "fazem a miniatura se transformar em uma foto grande" até experiências imersivas altamente personalizadas, como esta do Airbnb. Incrível!

No entanto, a implementação inicial exigia a construção de um SPA para usar as transições de visualização. A partir do 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 permitir as transições de visualização entre documentos, as duas extremidades precisam ativar a permissão. Para fazer isso, use o @view-transition em regra 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 de um mesmo documento. Os elementos com um view-transition-name aplicado 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 que os snapshots antigos sejam criados.
• Com o pagereveal, é possível personalizar a nova página antes que ela comece a ser renderizada depois de ser inicializada.

Nos dois eventos, você tem acesso a um objeto NavigationActivation para personalizar uma transição de visualização de vários documentos com base nas entradas antigas e novas 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 (além de algumas melhorias).

Esta é uma MPA com navegações entre documentos e está hospedada 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 a documentação sobre transições de visualização entre documentos.

Melhorias nas transições de visualização

Além de oferecer transições de visualização entre documentos para a MPA, o Chrome também inclui alguns refinamentos para trabalhar com as transições de visualização em geral.

Essas melhorias se aplicam às transições de visualização de um mesmo documento para SPA e transições de visualização entre documentos para a MPA.

Compartilhar estilos de animação com view-transition-class

Até agora, ao animar vários snapshots da mesma maneira, era necessário segmentar cada snapshot individualmente repetindo o pseudosseletor para cada elemento com um view-transition-name exclusivo.

Com o 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 dimensionam automaticamente de um para muitos elementos.

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

O exemplo de cards a seguir usa view-transition-class para aplicar o mesmo tempo de animação a vários snapshots com um seletor.

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 para as 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 mudem a outra.

Por exemplo, ao acessar a página seguinte ou a anterior em uma sequência de paginação, use animações diferentes dependendo do direcionamento a uma página superior ou inferior da sequência.

Antes dos tipos ativos, você pode adicionar classes ao DOM e responder a essas classes no CSS. No entanto, também seria necessário realizar um refinamento após a conclusão das transições.

Com os tipos de transição de visualização, é possível alcançar o mesmo resultado, com o benefício extra desses tipos sendo limpos automaticamente assim que a transição de visualização termina. Os tipos só se aplicam 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 de vários documentos, defina tipos na regra @view-transition usando o descritor types ou configure-os rapidamente nos eventos pageswap e pagereveal.

@view-transition {
  navigation: auto;
  types: slide, forwards;
}

Com os tipos definidos, é possível responder a eles no CSS usando os seletores das pseudoclasses :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 sobre transições de visualização no 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 grupo de trabalho de CSS no GitHub (em inglês) com sugestões e perguntas. Use [css-view-transitions] como prefixo do problema.

Caso tenha um bug, registre um bug do Chromium.