Publicado em: 27 de março de 2026
O Chrome 147 apresenta transições de visualização com escopo de elementos, um recurso que permite iniciar uma transição de visualização em uma subárvore do DOM chamando Element.startViewTransition().
Esse recurso permite que várias transições de visualização sejam executadas simultaneamente, que você aninhe transições de visualização em andamento e resolve problemas de camadas com conteúdo position: fixed, tudo isso mantendo o restante da página interativo.
O que mudou?
Desde que anunciamos que o recurso estava pronto para testes de desenvolvedores no Chrome 140, colaboramos com a comunidade e o CSS Working Group para finalizar os detalhes, principalmente em relação aos comportamentos padrão:
- As raízes de escopo são auto-participantes por padrão.
- As transições de visualização com escopo contêm automaticamente os pseudoelementos aninhados usando grupos de transição de visualização aninhados.
- O pseudoelemento
::view-transition-group-children()em uma transição de visualização com escopo corta automaticamente o conteúdo se a raiz do escopo cortar o overflow. - As transições de visualização com escopo de elementos aplicam automaticamente
contain: layouteview-transition-scope: allà raiz do escopo durante a transição.
Após essas atualizações, as transições de visualização com escopo de elementos estão disponíveis no Chrome Stable a partir da versão 147.
Demonstrações
Listas aleatórias
Essa demonstração permite embaralhar os itens em cada lista. Você também pode trocar as posições das listas selecionando o botão no centro.
Demonstração ao vivo
Gravação da demonstração
Como as transições de visualização com escopo de elementos são usadas, as duas listas podem executar as transições de visualização aleatória simultaneamente. Você também pode iniciar a transição de visualização externa, que troca as posições das listas, enquanto os itens da lista ainda estão sendo reorganizados.
Minha viagem à Patagônia
A demonstração "Minha viagem à Patagônia" demonstra transições de visualização com escopo de elementos. Essa demonstração foi criada com base no vídeo da campanha "Web UX, re-imaginada".
Use as listas suspensas para filtrar os itens da grade. Use o botão Adicionar em cada item da grade para adicioná-los à lista de itens selecionados, que aparece na barra lateral.
Demonstração ao vivo
Para conferir a demonstração completa, abra "Minha viagem à Patagônia" em outra guia.
Gravação da demonstração
A demonstração usa transições de visualização com escopo de elementos em três lugares:
- A grade de itens ao filtrá-los.
- Os itens da grade ao adicioná-los à lista de itens selecionados.
- A barra lateral que mostra a lista de itens selecionados.
Leia o guia
Para saber tudo sobre transições de visualização com escopo de elementos, leia o guia. Ele mostra como implementar transições de visualização com escopo de elementos, explica outros detalhes e inclui mais demonstrações.
Leia o guia de transições de visualização com escopo de elementos