Transições suaves com a API View Transition

Bramus

Com a API View Transition, é possível criar transições visuais perfeitas entre diferentes visualizações do seu site. Isso cria uma experiência visualmente mais envolvente para os usuários enquanto eles navegam no seu site, independentemente de ele ter sido 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 imagem em miniatura em uma página de informações do produto que faz a transição para 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 movendo-se das posições conforme você filtra.
Transições criadas com a API View Transition. Experimente o site de demonstração. Exige o Chrome 111 ou uma versão 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 e também entre dois documentos diferentes.

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

  1. O navegador cria 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 de um 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). A partir do Chrome 111, as transições de visualização de um mesmo documento estão disponíveis no Chrome 111.

Compatibilidade com navegadores

  • Chrome: 111
  • Borda: 111.
  • Firefox: incompatí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. Exige o Chrome 111 ou uma versão mais recente.

Comece a criar

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

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

Transições de visualização entre documentos

Quando ocorre uma transição de visualização entre dois documentos diferentes, ela é chamada de transição de visualização de vários 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
  • Borda: 126.
  • Firefox: incompatível.
  • Safari: incompatí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á API para chamar para iniciar uma transição de visualização de vários documentos. Quando um usuário clica em um link, o clique aciona a transição de visualização.

Para isso, use o seguinte snippet de CSS:

@view-transition {
  navigation: auto;
}

Exemplo

O exemplo do Stack Navigator a seguir é uma MPA que usa transições de visualização entre documentos diferentes. Dependendo de você se aprofundar ou não na navegação, as páginas serão empurradas para a pilha ou serão retiradas.

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

Comece a criar

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

Criar transições de visualização de vários documentos