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.

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 acontece 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.

Como acionar

Acione as transições de visualização do mesmo documento chamando 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 abaixo é um SPA que usa transições de visualização do mesmo documento para animar os cards à medida que novos são adicionados ou removidos.

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 é típico de MPAs. As transições de visualização entre documentos são compatíveis com o Chrome 126 e versões mais recentes.

Como acionar

As transições de visualização entre documentos são acionadas por uma navegação entre documentos de mesma origem, se ambas as páginas tiverem ativado essa opção. 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 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.

Comece a criar

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

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