Novidades nas transições de visualização (atualização de 2025)

Bramus

Publicado em: 8 de outubro de 2025

Muita coisa mudou desde que lançamos as transições de visualização no mesmo documento em 2023.

Em 2024, lançamos transições de visualização entre documentos, adicionamos refinamentos como view-transition-class e tipos de transição de visualização e também recebemos o Safari, que adicionou suporte a transições de visualização.

Esta postagem oferece uma visão geral das mudanças nas transições de visualização em 2025.

Melhor compatibilidade com navegadores e frameworks

As transições de visualização no mesmo documento vão se tornar "Recém-disponível"

Uma área de foco do Interop 2025 é a API View Transition, especificamente transições de visualização no mesmo documento com document.startViewTransition(updateCallback), view-transition-class, nomenclatura automática com view-transition-name: match-element e o seletor de CSS :active-view-transition.

O Firefox pretende incluir esses recursos na próxima versão 144, que será lançada em 14 de outubro de 2025. Isso vai disponibilizar esses recursos na linha de base.

O suporte à API View Transition agora está no núcleo do React

Ao longo do ano, a equipe do React trabalhou para adicionar transições de visualização ao núcleo do React. Eles anunciaram o suporte ao react@experimental em abril e, nesta semana, na React Conf, transferiram o suporte para o react@canary, o que significa que o design está quase finalizado.

function Child() {
  return (
    <ViewTransition>
      <div>Hi</div>
    </ViewTransition>
  );
}

function Parent() {
  const [show, setShow] = useState();
  if (show) {
    return <Child />;
  }
  return null;
}

Confira a documentação do <ViewTransition>React para todos os detalhes ou assista a esta palestra de Aurora Scharff para uma boa introdução ao assunto.

Recursos lançados recentemente

Nomear elementos automaticamente com view-transition-name: match-element

Para marcar um elemento a ser capturado como parte de uma transição de visualização, atribua a ele um view-transition-name. Isso é fundamental para as transições de visualização, já que desbloqueia recursos como a transição entre dois elementos diferentes. Cada elemento tem o mesmo valor de view-transition-name em cada lado da transição, e as transições de visualização cuidam de tudo para você.

No entanto, nomear elementos de forma exclusiva pode se tornar complicado ao fazer a transição de muitos elementos que não mudam muito. Se você tiver 100 elementos que se movem em uma lista, precisará criar 100 nomes exclusivos.

Graças ao match-element, você não precisa fazer tudo isso. Ao usar isso como o valor de view-transition-name, o navegador vai gerar um view-transition-name interno para cada elemento correspondente com base na identidade do elemento.

Na demonstração a seguir, essa abordagem é usada. Cada card na linha recebe um view-transition-name gerado automaticamente.

.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

#targeted-card {
  view-transition-name: targeted-card;
  view-transition-class: none;
}

O cartão que entra ou sai recebe um nome explícito. Esse nome é usado no CSS para anexar animações específicas a esse snapshot. Os snapshots de todos os outros cards são estilizados usando o view-transition-class associado a eles.

/* Style all pseudos with the class .card */
::view-transition-group(*.card) {
  animation-timing-function: var(--bounce-easing);
  animation-duration: 0.5s;
}

/* Style only the targeted-card's pseudos */
::view-transition-old(targeted-card):only-child {
  animation: animate-out ease-out 0.5s forwards;
}
::view-transition-new(targeted-card):only-child {
  animation: animate-in ease-in 0.25s forwards;
}

O DevTools agora mostra regras de segmentação de pseudoclasses que usam um view-transition-class

Para depurar transições de visualização, use o painel "Animações" do DevTools para pausar todas as animações. Assim, você tem tempo para inspecionar os pseudoelementos sem se preocupar com o fato de que a transição de visualização vai atingir o estado final. Você pode até mesmo percorrer manualmente as linhas do tempo da animação para ver como as transições acontecem.

Antes, ao inspecionar um dos pseudoelementos ::view-transition-*, o Chrome DevTools não expunha regras segmentadas para pseudoelementos usando o conjunto view-transition-class. Isso mudou no Chrome 139, que adicionou a funcionalidade.

Os grupos de transição de visualização aninhados estão disponíveis a partir do Chrome 140

Quando uma transição de visualização é executada, ela renderiza os elementos capturados em uma árvore de pseudoelementos. Por padrão, a árvore gerada é "plana". Isso significa que a hierarquia original no DOM é perdida, e todos os grupos de transição de visualização capturados são irmãos em um único pseudoelemento ::view-transition.

Essa abordagem de árvore plana é suficiente para muitos casos de uso, mas se torna problemática quando efeitos visuais, como recorte ou transformações 3D, são usados. Elas exigem alguma hierarquia na árvore.

Graças aos "Grupos de transição de visualização aninhados", agora é possível aninhar pseudoelementos ::view-transition-group uns nos outros. Quando os grupos de transição de visualização são aninhados, é possível restaurar efeitos como corte durante a transição.

Saiba como usar grupos de transição de visualização

Os pseudoelementos agora herdam mais propriedades de animação

Quando você define uma das propriedades abreviadas animation-* em um pseudoelemento ::view-transition-group(…), os elementos ::view-transition-image-pair(…), ::view-transition-old(…) e ::view-transition-new(…) contidos também herdam essa propriedade. Isso é útil porque mantém automaticamente o crossfade entre o ::view-transition-new(…) e o ::view-transition-old(…) sincronizado com o ::view-transition-group(…).

::view-transition-group(.card) {
  animation-duration: 0.5s;
}

Inicialmente, essa herança era limitada a animation-duration e animation-fill-mode (e depois animation-delay também), mas agora foi estendida para herdar mais abreviações de animação.

Os navegadores que oferecem suporte a transições de visualização agora precisam ter o seguinte no arquivo de estilo do user agent:

:root::view-transition-image-pair(*),
:root::view-transition-old(*),
:root::view-transition-new(*) {
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
  animation-timing-function: inherit;
  animation-iteration-count: inherit;
  animation-direction: inherit;
  animation-play-state: inherit;
}

Os pseudoelementos que herdam mais propriedades foram lançados no Chrome 140.

A execução do callback da promessa finished não aguarda mais um frame.

Ao usar a promessa finished para executar um callback, o Chrome esperava a produção de um frame antes de executar essa lógica. Isso pode causar uma oscilação no final da animação quando o script move alguns estilos para preservar um estado visualmente semelhante.

 document.startViewTransition(() => {
  if (from) {
    dfrom.classList.remove("shadow");
    dto.appendChild(target);
  } else {
    dto.classList.remove("shadow");
    dfrom.appendChild(target);
  }
}).finished.then(() => {
  if (from) {
    dto.classList.add("shadow");
  } else {
    dfrom.classList.add("shadow");
  }
  from = 1 - from;
});

Essa mudança no tempo corrige a situação movendo as etapas de limpeza da transição de visualização para serem executadas de forma assíncrona após a conclusão do ciclo de vida. Isso garante que o frame visual produzido na resolução da promessa finished ainda mantenha a estrutura de transição de visualização, evitando assim a oscilação.

Essa mudança de tempo foi lançada no Chrome 140.

Próximos recursos

O ano ainda não acabou, então ainda há tempo para lançar mais recursos.

As transições de visualização com escopo estão prontas para teste no Chrome 140

As transições de visualização com escopo são uma extensão proposta para a API View Transition, que permite iniciar uma transição de visualização em uma subárvore do DOM chamando element.startViewTransition() (em vez de document.startViewTransition()) em qualquer HTMLElement.

As transições com escopo permitem que várias transições de visualização sejam executadas ao mesmo tempo, desde que tenham raízes de transição diferentes. Os eventos de ponteiro são impedidos apenas nessa subárvore (que pode ser reativada), e não em todo o documento. Além disso, eles permitem que elementos fora da raiz da transição sejam renderizados sobre a transição de visualização no escopo.

Na demonstração a seguir, você pode mover um ponto dentro do contêiner clicando em um dos botões. Isso pode ser feito com transições de visualização no escopo do documento ou do elemento, permitindo que você veja como elas se comportam de maneira diferente.

O recurso está pronto para testes no Chrome 140 com a flag "Recursos experimentais da plataforma da Web" ativada em chrome://flags. Estamos buscando ativamente o feedback dos desenvolvedores.

A posição de ::view-transition vai mudar de fixed para absolute no Chrome 142

O pseudoelemento ::view-transition está posicionado usando position: fixed. Seguindo uma resolução do Grupo de trabalho CSS, isso vai mudar para position: absolute.

Essa mudança no valor position de fixed para absolute, que será lançada no Chrome 142, não é visualmente observável porque o bloco de contenção do pseudoelemento ::view-transition é o bloco de contenção do instantâneo de qualquer maneira. O único efeito observável é um valor position diferente ao fazer um getComputedStyle.

O document.activeViewTransition vai chegar ao Chrome 142

Quando uma transição de visualização é iniciada, uma instância ViewTransition é criada. Esse objeto contém várias promessas e funcionalidades para acompanhar o progresso da transição, além de permitir manipulações como pular a transição ou modificar os tipos dela.

Em vez de exigir que você acompanhe manualmente essa instância, o Chrome agora oferece uma propriedade document.activeViewTransition que representa esse objeto. Se nenhuma transição estiver em andamento, o valor será null.

Para transições de visualização no mesmo documento, o valor é definido quando você chama document.startViewTransition. Para transições de visualização entre documentos, acesse essa instância ViewTransition nos eventos pageswap e pagereveal.

O suporte para document.activeViewTransition será lançado no Chrome 142.

Impedir que uma transição de visualização termine automaticamente com ViewTransition.waitUntil

Uma transição de visualização atinge automaticamente o estado finished quando todas as animações são concluídas. Para evitar esse encerramento automático, você poderá usar ViewTranistion.waitUntil em breve. Ao transmitir uma promessa, o ViewTransition só vai atingir o estado finished quando essa promessa também for resolvida.

const t = document.startViewTransition(…);
t.waitUntil(async () => {
  await fetch(…);
});

Essa mudança vai chegar ainda este ano e permitirá, por exemplo, aguardar um fetch ou desbloquear a implementação mais fácil de uma transição de visualização controlada por rolagem.

A seguir

Como você pode ver, não ficamos parados desde que lançamos as transições de visualização em 2023. Estamos ansiosos para lançar transições de visualização com escopo no futuro e, como sempre, estamos abertos a feedback.

Se você tiver dúvidas sobre transições de visualização, entre em contato com a gente nas redes sociais. As solicitações de recursos para transições de visualização podem ser enviadas ao WG do CSS. Se você encontrar um bug, registre um bug do Chromium para nos avisar.