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

Bramus

Publicado em: 16 de maio de 2024

No Google I/O 2024, anunciei a próxima etapa das transições de visualização: transições de visualização entre documentos para aplicativos de várias páginas (MPA).

Além disso, compartilhei algumas melhorias que facilitam o trabalho 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 a transições de visualização no mesmo documento para aplicativos de página única (SPA) e entre documentos para MPA.

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

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

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

No entanto, a implementação inicial exigia a criação de um SPA para usar transições de visualização. A partir do Chrome 126, isso não acontece mais. As transições de visualização agora 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 de mesma origem.

Para ativar as transições de visualização entre documentos, as duas extremidades precisam ativar essa opção. Para fazer isso, use a regra at @view-transition e defina o descritor navigation como auto.

@view-transition {
  navigation: auto;
}

As transições de visualização entre documentos usam os mesmos blocos de construção e princípios das transições de visualização no mesmo documento. Os elementos com um view-transition-name aplicado são capturados, e você pode 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, você pode fazer algumas mudanças de última hora na página de saída antes que os snapshots antigos sejam criados.
• Com pagereveal, é possível personalizar a nova página antes que ela comece a ser renderizada após a inicialização.

Em ambos os eventos, você tem acesso a um objeto NavigationActivation para personalizar uma transição de visualização entre documentos com base nas entradas de histórico de destino antigas e novas ou no tipo de navegação.

Além disso, você pode esperar o conteúdo carregar com bloqueio de renderização e usar a pré-renderização para melhorar o tempo de carregamento antes da execução da transição de visualização.

Demonstração

Esta demonstração do Stack Navigator combina todos esses recursos (além de algumas melhorias).

É um MPA com navegações entre documentos hospedado na mesma origem. Ao usar pagereveal, o tipo de animação é determinado com base nas entradas antigas e novas do histórico de destinos.

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 transições de visualização entre documentos, consulte nossa documentação sobre transições de visualização entre documentos.

Melhorias nas transições de visualização

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

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

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

Até agora, ao animar vários snapshots da mesma forma, era necessário segmentar cada um deles individualmente repetindo o pseudoseletor 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 pseudoseletores para segmentar todos os instantâneos correspondentes. Isso resulta em seletores muito mais simples, que são dimensionados automaticamente de um para vários 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 a mesma animação a muitos snapshots usando um seletor.

Para saber mais sobre view-transition-class, leia a documentação dedicada sobre view-transition-class.

Transições de visualização seletivas com tipos ativos

Outro refinamento nas transições de visualização é a introdução da adição de tipos a uma transição de visualização ao capturá-la e realizá-la. Isso facilita o trabalho com várias transições de visualização na mesma página, sem as declarações de uma mudando a outra.

Por exemplo, ao ir para a próxima ou a página anterior em uma sequência de paginação, você pode usar animações diferentes dependendo se está indo para uma página superior ou inferior da sequência.

Antes dos tipos ativos, era possível adicionar classes ao DOM e responder a elas no CSS. No entanto, você também precisaria fazer uma limpeza depois que as transições fossem concluídas.

Com os tipos de transição de visualização, você pode alcançar o mesmo resultado, com o benefício adicional de que esses tipos são limpos automaticamente quando a transição de visualização termina. Os tipos só são aplicados ao capturar ou realizar a transição.

Para transições de visualização no 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 regra @ @view-transition usando o descritor types ou defina-os na hora nos eventos pageswap e pagereveal.

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

Com os tipos definidos, você pode responder a eles no CSS usando os seletores de pseudoclasse :active-view-transition-type() e :active-view-transition, que se aplicam à raiz da 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 no mesmo documento e entre documentos.

Feedback

O feedback dos desenvolvedores é sempre bem-vindo. Para isso, registre um problema com o grupo de trabalho do CSS no GitHub com sugestões e perguntas. Adicione o prefixo [css-view-transitions] ao seu problema.

Se você encontrar um bug, registre um bug do Chromium.