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 (em inglês), anunciamos a próxima etapa das transições de visualização: as transições de visualização entre documentos em aplicativos de várias páginas (MPA, na sigla em inglês).

Além disso, compartilhei algumas melhorias que permitem trabalhar com mais facilidade 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 seletiva com tipos ativos.

Essas melhorias se aplicam a transições de visualização do mesmo documento para aplicativos de página única (SPA) e transições de visualização entre documentos para 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 bem recebido na comunidade de desenvolvimento da Web.

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

No entanto, a implementação inicial exigia que você criasse um SPA para usar as transições de visualização. A partir do Chrome 126, isso não é mais o caso. 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 diferentes com a mesma origem.

Para permitir as transições de visualização entre documentos, as duas extremidades precisam ativar a opção. Para fazer isso, use a regra @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 de um 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 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 pageswap, você pode fazer algumas mudanças de última hora na página de saída antes que os snapshots antigos sejam feitos.
• Com pagereveal, você pode personalizar a nova página antes que ela comece a renderizar 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 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 (com 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 transições de visualização entre documentos, consulte a nossa documentação sobre transições de visualização entre documentos.

Conferir melhorias nas transições

Além de enviar transições de visualização entre documentos para MPA, 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 transições de visualização 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 que tem 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 pseudoseletores para segmentar todos os snapshots correspondentes. Isso resulta em seletores muito mais simples, que dimensionam automaticamente de um a muitos elementos.

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

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

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

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

Outro refinamento nas transições de visualização é a introdução de 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 anterior em uma sequência de paginação, use animações diferentes dependendo se você está indo para uma página mais alta ou mais baixa 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 precisa fazer a limpeza 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 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 em tempo real 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 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 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 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.

Caso tenha um bug, registre um bug do Chromium.