A API View Transition oferece a capacidade de criar transições visuais perfeitas entre diferentes visualizações no seu site. Isso cria uma experiência do usuário mais visualmente atraente para os usuários enquanto eles navegam no seu site, independentemente de ter sido criado como um aplicativo de várias páginas (MPA, na sigla em inglês) ou um aplicativo de página única (SPA).
Situações típicas em que você usaria transições de visualização incluem:
- Uma imagem em miniatura na página de informações do produto que faz a transição para uma imagem do produto em tamanho original 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 se movendo posições conforme você filtra.
Implementar transições de visualização
As transições de visualização não estão vinculadas a uma estrutura ou arquitetura de aplicativo específica 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ções dependem dos mesmos elementos e princípios:
- O navegador cria snapshots do estado antigo e do novo.
- O DOM é atualizado enquanto a renderização é suprimida.
- As transições usam animações CSS.
A diferença entre os dois tipos é como os aciona.
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 estão disponíveis no Chrome a partir do Chrome 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 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.
Comece a criar
Consulte a página dedicada da documentação para saber tudo o que você precisa saber sobre as transições de visualização de um mesmo documento.
Criar transições de visualização do mesmo documento
Transições de visualização entre documentos
Quando ocorre uma transição de visualização entre dois documentos, isso é chamado de transição de visualização entre documentos. Isso é comum para MPAs. As transições de visualização entre documentos estão disponíveis no Chrome 126 e versões mais recentes.
Como acionar
As transições de visualização entre documentos são acionadas por uma navegação de mesma origem entre documentos, se as duas páginas estiverem ativadas. Em outras palavras, não há uma API para chamar a fim de 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.
Principal aceitação, use o seguinte snippet CSS:
@view-transition {
navigation: auto;
}
Exemplo
O exemplo do Stack Navigator a seguir é um MPA que usa transições de visualização entre documentos diferentes. Dependendo se você está se aprofundando ou não na navegação, as páginas são empurradas para a pilha ou são exibidas.
Comece a criar
Saiba tudo o que você precisa saber sobre as transições de visualização entre documentos.