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 do usuário mais envolvente visualmente enquanto ele navega pelo site, seja ele criado como um aplicativo de várias páginas (MPA) ou de página única (SPA).

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

• Uma miniatura em uma página de detalhes do produto que se transforma 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 à medida que 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 antigo e novo.
2. O DOM é atualizado enquanto a renderização é suprimida.
3. As transições são alimentadas por animações CSS.

A única diferença entre os dois tipos é como eles são acionados.

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

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

Como acionar

Acione transições de visualização no 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 a seguir é um SPA que usa transições de visualização no 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 transições de visualização no 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 a 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 navegador de pilha a seguir é uma MPA que usa transições de visualização entre documentos para transições entre dois documentos diferentes. Dependendo se você está se aprofundando na navegação ou não, as páginas são enviadas para a pilha ou removidas dela.

Comece a criar

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

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