Transições suaves com a API View Transition

Bramus

A API View Transition permite criar transições visuais perfeitas entre diferentes visualizações no seu site. Isso cria uma experiência mais envolvente para os usuários enquanto eles navegam pelo site, independentemente de ele ser criado como um aplicativo de várias páginas (MPA) ou de página única (SPA).

As situações típicas em que você usaria transições de visualização incluem:

  • Uma imagem em miniatura na página de listagem do produto que é convertida em uma imagem em tamanho real na página de detalhes do produto.
  • Uma barra de navegação fixa que permanece no lugar enquanto você navega de uma página para outra.
  • Uma grade com itens que mudam de posição conforme você filtra.
Transições criadas com a API View Transition. Teste o site de demonstração. Requer o Chrome 111 ou mais recente.

Implementar transições de visualização

As transições de visualização não estão vinculadas a uma arquitetura ou framework de aplicativo específico e podem ser acionadas não apenas em um único documento, mas também entre dois documentos diferentes.

Os dois tipos de transição de visualização dependem dos mesmos elementos básicos e princípios:

  1. O navegador faz snapshots dos estados antigos e novos.
  2. O DOM é atualizado enquanto a renderização é suprimida.
  3. As transições são geradas por animações CSS.

A única diferença entre os dois tipos é a forma de acionamento.

Transições de visualização do mesmo documento

Quando uma transição de visualização é executada em um único documento, ela é chamada de transição de visualização do mesmo documento. Isso geralmente ocorre em aplicativos de página única (SPAs). As transições de visualização do mesmo documento são compatíveis com o Chrome a partir da versão 111.

Compatibilidade com navegadores

  • Chrome: 111.
  • Edge: 111.
  • Firefox: não é compatível.
  • Safari: 18.

Origem

Como acionar

Para acionar as transições de visualização do mesmo documento, chame document.startViewTransition:

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

Exemplo

O exemplo de cards a seguir é um SPA que usa transições de visualização do mesmo documento para animar os cards à medida que novos são adicionados ou removidos.

Gravação da demonstração de cards. Requer o Chrome 111 ou mais recente.

Comece a criar

Consulte a página de documentação dedicada para saber tudo sobre as transições de visualização do mesmo documento.

Criar transições de visualização no mesmo documento

Transições de visualização entre documentos

Quando uma transição de visualização ocorre entre dois documentos diferentes, ela é chamada de transição de visualização entre documentos. Isso é comum para MPAs. As transições de visualização entre documentos são compatíveis com o Chrome 126 e versões mais recentes.

Compatibilidade com navegadores

  • Chrome: 126.
  • Edge: 126.
  • Firefox: não é compatível.
  • Prévia da tecnologia do Safari: compatível.

Como acionar

As transições de visualização de vários documentos são acionadas por uma navegação de mesma origem em documentos diferentes, caso as duas páginas estejam ativadas. Em outras palavras, não há uma API para chamar e iniciar uma transição de visualização entre documentos. Quando um usuário clica em um link, o clique aciona a transição de visualização.

Para ativar, use o seguinte snippet de CSS:

@view-transition {
  navigation: auto;
}

Exemplo

O exemplo de Stack Navigator a seguir é um MPA que usa transições de visualização entre documentos para alternar entre dois documentos diferentes. Dependendo se você está aprofundando a navegação ou não, as páginas são empurradas para a pilha ou são removidas.

Gravação da demonstração do Stack Navigator. Requer o Chrome 126 ou mais recente.

Comece a criar

Saiba tudo sobre as transições de visualização entre documentos.

Criar transições de visualização entre documentos