Ver transições para aplicativos de página única

Um padrão comum para páginas da Web é usar JavaScript para substituir dinamicamente o conteúdo de uma página sem carregar um novo documento HTML completo. Isso é chamado de aplicativo de página única, ou SPA. As transições de visualização oferecem uma maneira de mostrar continuidade ou contexto entre as páginas no seu SPA.

Transições de página inteira

Quando o usuário navega para uma nova visualização no SPA, o framework substitui o DOM por um novo conteúdo. Isso faz com que o conteúdo apenas apareça, mas e se você quiser fornecer uma transição entre o conteúdo atual e o novo?

As transições geralmente mostram as visualizações antiga e nova simultaneamente, por exemplo, desaparecendo a visualização antiga enquanto a nova aparece. Como o conteúdo atual é substituído, isso era um desafio antes das transições de visualização.

Para usar transições de visualização, é necessário incluir a lógica de mudança do DOM em um callback. Para esses exemplos, temos uma implementação básica de roteador fornecida por um componente da Web chamado MyRouter. A maneira de ativar as transições de visualização depende do roteador e da estrutura que você está usando.

document.startViewTransition(() => updateTheDOMSomehow());

Isso ativa a transição padrão, que desaparece a visualização antiga enquanto aparece a nova.

O que está acontecendo aqui? Quando você chama document.startViewTransition(), o navegador tira um snapshot da visualização antiga. Em seguida, ele chama a função de callback que você transmite, que atualiza o DOM para a nova visualização (mas ainda não a mostra). Quando a função de callback é concluída, o navegador inicia a transição para o novo conteúdo.

// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
  updateTheDOMSomehow();
  return;
} else {
  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

Como personalizar a transição

Como você viu no exemplo anterior, a transição de visualização padrão desaparece a visualização antiga enquanto aparece a nova. Você pode personalizar a transição para combinar melhor com o estilo do seu site usando pseudoelementos gerados por transições de visualização.

É possível especificar a transição de saída com ::view-transition-old() e a transição de entrada com ::view-transition-new(). Também é possível especificar valores para ambos com ::view-transition-group().

Neste exemplo, a visualização antiga vai sair usando a transição slide-out-to-left, e a nova vai entrar usando a transição slide-in-from-right. Ambos terão uma duração de 200 milissegundos.

::view-transition-group(root){
  animation-duration: 200ms;
}

::view-transition-old(root) {
  animation-name: slide-out-to-left;
}

::view-transition-new(root) {
  animation-name: slide-in-from-right;
}

Transições diferentes com base no contexto

Talvez você queira ter transições diferentes com base no que o usuário está fazendo. Por exemplo, se clicar em um link na página inicial deslizar a nova visualização da direita para a esquerda, você esperaria que clicar em um link para voltar à página inicial deslizasse a visualização inicial da esquerda para a direita.

Você pode especificar animações diferentes usando a pseudoclasse :active-view-transition-type().

html:active-view-transition-type(forwards) {
  &::view-transition-old(root) {
    animation-name: slide-out-to-left;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-from-right;
  }
}

Em seguida, escolha qual tipo de transição de visualização usar ao chamar document.startViewTransition().

const direction = next === 'home' ? 'backwards' : 'forwards';

document.startViewTransition({
  update: updateTheDOMSomehow,
  types: [direction],
});

Transição de elementos específicos

Até agora, você só aplicou uma transição ao elemento raiz para fazer a transição de toda a visualização. Mas você também pode usar transições de visualização para animar partes específicas das suas páginas.

Por exemplo, você pode ter conteúdo na visualização antiga que corresponde ao conteúdo na nova visualização. Pode ser o título do conteúdo ou uma imagem. Pode ser até uma miniatura na visualização antiga e um vídeo na nova.

Primeiro, especifique quais elementos devem ser transacionados usando a propriedade view-transition-name. Para que as transições de visualização funcionem, cada view-transition-name precisa ter exatamente um elemento antes de você chamar document.startViewTransition() e exatamente um elemento depois que o callback em document.startViewTransition() for concluído.

Neste exemplo, há um player de música que mostra a capa do álbum, o título e o artista. Uma visualização alternativa mostra o mesmo conteúdo reorganizado, com a adição da letra da música.

No exemplo anterior, há exatamente um de cada um dos elementos em transição na visualização antiga e na nova, e eles até compartilham os mesmos seletores. Os elementos em transição parecem se mover entre os tamanhos e as posições. As partes não transicionadas da visualização aparecem e desaparecem.

Confira um exemplo mais complexo. Por exemplo, a página inicial de um blog pode mostrar um título e uma imagem para cada postagem, que também estão presentes na visualização de página inteira de uma postagem do blog. Ao navegar da página inicial para uma postagem específica, talvez você queira que o título e a imagem pareçam fazer a transição para o novo local para fornecer contexto.

Para fazer isso com o título, você precisa ter um view-transition-name no elemento de título que seja exclusivo na visualização antiga, compartilhado com o elemento de título na nova visualização e exclusivo na nova visualização. Isso é um desafio porque a página inicial tem vários títulos e imagens, e você não sabe em qual deles o usuário vai clicar.

Você tem duas opções para resolver isso. Você pode adicionar um view-transition-name exclusivo para cada postagem na página inicial e corresponder esse nome em cada postagem de página inteira. É possível gerar esses dados usando o ID de uma postagem. Outra opção é usar um view-transition-name genérico, mas só aplicá-lo depois que o usuário clicar em uma postagem, mas antes de chamar document.startViewTransition().

Como criar transições

As transições de visualização são um conjunto de ferramentas que você pode usar para orientar os usuários e fornecer mais dicas de marca ou contexto. É provável que você use várias técnicas para encontrar as transições que funcionam para seu site.

Dependendo do efeito que você quer, talvez seja necessário ajustar os elementos ou as animações. No exemplo anterior, vários estilos foram ajustados para conseguir transições suaves.

O título tem a regra width: fit-content, que é um estilo útil ao fazer a transição de um texto que não é ajustado ou tem o mesmo ajuste na visualização antiga e na nova. Caso contrário, a transição pode ser entre elementos com larguras diferentes, o que a torna menos suave.

A imagem também tem uma proporção diferente nas visualizações antiga e nova. O exemplo modifica a animação e a propriedade object-fit para que a transição pareça suave.

Respeitar prefers-reduced-motion

Um motivo comum para os usuários pedirem movimento reduzido é que animações em tela cheia, como as que podem ser feitas com transições de visualização, podem causar desconforto para pessoas com distúrbios vestibulares. É possível desativar as animações usando a consulta de mídia prefers-reduced-motion. Você também pode fornecer animações alternativas mais sutis, mas que ainda transmitam como os elementos estão conectados.

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

Teste seu conhecimento