Pronto para testes de desenvolvedores: transições de visualização com escopo

Bramus

Publicado em: 10 de setembro de 2025

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. 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.

Introdução breve

Para iniciar uma transição de visualização com escopo, chame element.startViewTransition() (em vez de document.startViewTransition()) em qualquer HTMLElement com contain: layout aplicado.

document.querySelector('nav').startViewTransition({
  callback: () => {
    // … code that manipulates the contents of <nav>
  },
})

O resultado é uma transição de visualização no escopo da subárvore do HTMLElement escolhido, com a pseudárvore ::view-transition resultante sendo injetada nesse HTMLElement. O HTMLElement funciona como um contêiner para as animações de transição.

html
  ├─ head
  └─ body
     ├─ nav
     │  ├─ ::view-transition
     │  │  └─ ::view-transition-group(thing)
     │  │     └─ ::view-transition-image-pair(thing)
     │  │        ├─ ::view-transition-old(thing)
     │  │        └─ ::view-transition-new(thing)
     │  └─ ul
     │     ├─ li
     │     ├─ li
     │     └─ li
     └─ main
        └─ …

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.

Saiba tudo sobre transições de visualização com escopo no artigo explicativo sobre transições de visualização com escopo.

Demonstração

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.

Com as transições de visualização no escopo, o ponto permanece cortado pelo elemento pai durante a transição. Além disso, o ponto não é mostrado sobre o popover.

Queremos seu feedback

Queremos receber feedback da comunidade de desenvolvedores da Web sobre:

• O formato da API Scoped View Transitions.
• Casos de uso em que o recurso funciona bem ou não funcionou como esperado.
• Como as perguntas sobre escopos de participação própria devem ser resolvidas.

Compartilhe seu feedback comentando no problema #9890 do CSS WG. Conheça os problemas conhecidos e as restrições antes de enviar feedback.

Se você encontrar um bug, registre um bug do Chromium para nos avisar.