Animações de transição de route

Animações de transição de route melhoram a experiência do usuário fornecendo transições visuais suaves ao navegar entre diferentes visualizações na sua aplicação Angular. O Angular Router inclui suporte integrado para a API de View Transitions do navegador, permitindo animações perfeitas entre mudanças de route em navegadores suportados.

ÚTIL: A integração nativa de View Transitions do Router está atualmente em developer preview. View Transitions nativas são um recurso de navegador relativamente novo com suporte limitado em todos os navegadores.

Como funcionam as View Transitions

View transitions usam a API nativa do navegador document.startViewTransition para criar animações suaves entre diferentes estados da sua aplicação. A API funciona:

Capturando o estado atual - O navegador tira uma captura de tela da página atual
Executando a atualização do DOM - Sua função de callback roda para atualizar o DOM
Capturando o novo estado - O navegador captura o estado atualizado da página
Reproduzindo a transição - O navegador anima entre os estados antigo e novo

Aqui está a estrutura básica da API startViewTransition:

document.startViewTransition(async () => {  await updateTheDOMSomehow();});

Para mais detalhes sobre a API do navegador, veja o Chrome Explainer.

Como o Router usa view transitions

O Angular Router integra view transitions no ciclo de vida de navegação para criar mudanças de route perfeitas. Durante a navegação, o Router:

Completa a preparação da navegação - Correspondência de route, lazy loading, guards e resolvers são executados
Inicia a view transition - O Router chama startViewTransition quando as routes estão prontas para ativação
Atualiza o DOM - O Router ativa novas routes e desativa antigas dentro do callback de transição
Finaliza a transição - A Promise de transição é resolvida quando o Angular completa a renderização

A integração de view transition do Router age como um progressive enhancement. Quando os navegadores não suportam a API de View Transitions, o Router realiza atualizações normais do DOM sem animação, garantindo que sua aplicação funcione em todos os navegadores.

Habilitando View Transitions no Router

Habilite view transitions adicionando o recurso withViewTransitions à sua configuração de router. O Angular suporta abordagens de bootstrap standalone e NgModule:

Bootstrap standalone

import { bootstrapApplication } from '@angular/platform-browser';import { provideRouter, withViewTransitions } from '@angular/router';import { routes } from './app.routes';bootstrapApplication(MyApp, {  providers: [    provideRouter(routes, withViewTransitions()),  ]});

Bootstrap NgModule

import { NgModule } from '@angular/core';import { RouterModule } from '@angular/router';@NgModule({  imports: [RouterModule.forRoot(routes, {enableViewTransitions: true})]})export class AppRouting {}

Experimente o exemplo "count" no StackBlitz

Este exemplo demonstra como a navegação do router pode substituir chamadas diretas de startViewTransition para atualizações de contador.

Personalizando transições com CSS

Você pode personalizar view transitions usando CSS para criar efeitos de animação únicos. O navegador cria elementos de transição separados que você pode segmentar com seletores CSS.

Para criar transições personalizadas:

Adicione view-transition-name - Atribua nomes únicos aos elementos que você deseja animar
Defina animações globais - Crie animações CSS nos seus estilos globais
Segmente pseudo-elementos de transição - Use os seletores ::view-transition-old() e ::view-transition-new()

Aqui está um exemplo que adiciona um efeito de rotação a um elemento contador:

/* Define keyframe animations */@keyframes rotate-out {  to {    transform: rotate(90deg);  }}@keyframes rotate-in {  from {    transform: rotate(-90deg);  }}/* Target view transition pseudo-elements */::view-transition-old(count),::view-transition-new(count) {  animation-duration: 200ms;  animation-name: -ua-view-transition-fade-in, rotate-in;}::view-transition-old(count) {  animation-name: -ua-view-transition-fade-out, rotate-out;}

IMPORTANTE: Defina animações de view transition no seu arquivo de estilos globais, não nos estilos de component. O view encapsulation do Angular escopa estilos de component, o que impede que eles segmentem os pseudo-elementos de transição corretamente.

Experimente o exemplo "count" atualizado no StackBlitz

Controle avançado de transição com onViewTransitionCreated

O recurso withViewTransitions aceita um objeto de opções com um callback onViewTransitionCreated para controle avançado sobre view transitions. Este callback:

Roda em um injection context
Recebe um objeto ViewTransitionInfo contendo:
- A instância ViewTransition de startViewTransition
- O ActivatedRouteSnapshot para a route de onde está navegando
- O ActivatedRouteSnapshot para a route para onde está navegando

Use este callback para personalizar o comportamento de transição com base no contexto de navegação. Por exemplo, você pode pular transições para tipos específicos de navegação:

import { inject } from '@angular/core';import { Router, withViewTransitions } from '@angular/router';withViewTransitions({  onViewTransitionCreated: ({transition}) => {    const router = inject(Router);    const targetUrl = router.getCurrentNavigation()!.finalUrl!;    // Skip transition if only fragment or query params change    const config = {      paths: 'exact',      matrixParams: 'exact',      fragment: 'ignored',      queryParams: 'ignored',    };    if (router.isActive(targetUrl, config)) {      transition.skipTransition();    }  },})

Este exemplo pula a view transition quando a navegação apenas muda o fragmento de URL ou query parameters (como links âncora dentro da mesma página). O método skipTransition() previne a animação enquanto ainda permite que a navegação seja completada.

Exemplos do Chrome explainer adaptados para Angular

Os exemplos a seguir demonstram várias técnicas de view transition adaptadas da documentação da equipe do Chrome para uso com o Angular Router:

Elementos em transição não precisam ser o mesmo elemento DOM

Elementos podem transicionar suavemente entre diferentes elementos DOM, desde que compartilhem o mesmo view-transition-name.

Animações de entrada e saída personalizadas

Crie animações únicas para elementos entrando e saindo do viewport durante transições de route.

Atualizações assíncronas do DOM e espera por conteúdo

O Angular Router prioriza transições imediatas sobre esperar por conteúdo adicional para carregar.

Chrome Explainer

NOTA: O Angular Router não fornece uma maneira de atrasar view transitions. Esta escolha de design evita que as páginas se tornem não interativas enquanto aguardam conteúdo adicional. Como a documentação do Chrome observa: "Durante este tempo, a página está congelada, então os atrasos aqui devem ser mantidos ao mínimo...em alguns casos é melhor evitar o atraso completamente e usar o conteúdo que você já tem."