View Transitions

No Laboratório Belavista, o catálogo local troca de “página” sem recarregar o HTML inteiro. View Transitions animam a troca do DOM numa SPA simples.

O exemplo está em pacote de exemplos/53-view-transitions/. Abra index.html em 127.0.0.1. Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

Suporte ainda não é universal: sempre inclua fallback sem a API.

O que você vai aprender

• O conceito de SPA: trocar conteúdo com JavaScript na mesma URL base.
• Chamar document.startViewTransition(() => …).
• Personalizar ::view-transition-old e ::view-transition-new.
• Garantir que a troca funcione mesmo sem a API.

Ideia

O navegador tira um “retrato” da vista antiga, você atualiza o DOM, e a API anima até a vista nova. O padrão é um fade.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>View Transitions — Belavista</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <header>
      <nav aria-label="Catálogo">
        <button type="button" data-vista="cartazes">Cartazes</button>
        <button type="button" data-vista="workshops">Workshops</button>
      </nav>
    </header>
    <main id="palco" tabindex="-1">
      <h1>Cartazes</h1>
      <p>Série fictícia da vitrine do ateliê.</p>
    </main>
    <script src="app.js"></script>
  </body>
</html>

const palco = document.getElementById("palco");
const paginas = {
  cartazes: "<h1>Cartazes</h1><p>Série fictícia da vitrine do ateliê.</p>",
  workshops: "<h1>Workshops</h1><p>Oficinas de tipografia aos sábados.</p>"
};

function irPara(vista) {
  const atualizar = () => {
    palco.innerHTML = paginas[vista];
    palco.focus();
  };
  if (!document.startViewTransition) {
    atualizar();
    return;
  }
  document.startViewTransition(atualizar);
}

document.querySelectorAll("[data-vista]").forEach((botao) => {
  botao.addEventListener("click", () => irPara(botao.dataset.vista));
});

::view-transition-group(root) {
  animation-duration: 220ms;
}
::view-transition-old(root) {
  animation-name: sair;
}
::view-transition-new(root) {
  animation-name: entrar;
}
@keyframes sair {
  to { opacity: 0; }
}
@keyframes entrar {
  from { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) {
    animation-duration: 0.01ms;
  }
}

Mude uma coisa. Troque 220ms por 800ms. Preveja transição lenta. Clique em Workshops. Confira.

Nomes e customização

Por padrão o documento usa view-transition-name: root. Você pode nomear elementos persistentes (logo, capa) para eles “viajarem” entre vistas. Tipos de transição (:active-view-transition-type(...)) permitem ir/voltar diferentes — conceito avançado; neste volume basta o fade raiz.

Erro comum: chamar startViewTransition sem fallback. Em navegador sem suporte, a SPA precisa atualizar o DOM mesmo assim.

Escopo deste volume

Aqui a SPA é mínima: duas vistas em um objeto. Não há framework, roteador remoto nem publicação. Arquivo no disco; teste só em 127.0.0.1. Conteúdo fictício.

Atividades

1. O que document.startViewTransition espera como argumento?
2. Por que o if (!document.startViewTransition) existe?
3. View Transitions substituem transition em botões hover?

Respostas comentadas

1. Uma função (callback) que atualiza o DOM para a nova vista.
2. Para navegadores sem a API ainda trocarem o conteúdo, só sem animação.
3. Não. Continuam úteis para estados locais; View Transitions cobrem troca de vista/página na SPA.

O arquivo completo

Referência do exemplo 53-view-transitions, reproduzida aqui para que você possa conferir sem sair da página.

demo.js

const textos=['Cartaz A — Feira do Verde','Cartaz B — Jazz no Pátio'];
let i=0;
document.getElementById('trocar').onclick=()=>{
  const run=()=>{ i=1-i; document.getElementById('texto').textContent=textos[i]; };
  if(document.startViewTransition) document.startViewTransition(run); else run();
};