Laboratório nativo / 03

Transições do SW Framework

A API nativa melhora mudanças de estado quando o navegador oferece suporte. A ação e o conteúdo continuam funcionando imediatamente sem animação.

Mesmo documento ativoDireção MPA classificada

Demonstração

Mudança de estado

O botão executa SW.Trans.run(). Em navegadores compatíveis, o estado recebe uma transição nativa; nos demais, a atualização é direta.

Estado A
morph validado e único
SW.Trans.run(() => {
  elemento.dataset.transitionState = 'active';
});

Estado real

O que está pronto

A base funcional é comum aos navegadores testados. A animação MPA entra somente quando o motor oferece o ciclo completo.

Disponível agora

  • Helper para transição no mesmo documento.
  • Morphing declarativo com nomes únicos validados.
  • Direções forward, back e neutral validadas pelo histórico.
  • Overlay, fallback e redução de movimento.

Em desenvolvimento

  • Scroll scrub ainda não implementado.
  • Dispositivos físicos e versões anteriores ainda não foram homologados.
  • O comportamento MPA continua dependente da capacidade de cada navegador.

Matriz homologada

O mesmo fluxo, três capacidades

Os 65 testes cobrem navegação, componentes, formulários, console e layout. O resultado abaixo descreve o que cada motor realmente entregou no laboratório.

Chromium 149

  • Avanço MPA animado.
  • Voltar e recarregar preservam o fallback funcional.
  • 375px, 768px e 1280px homologados.

WebKit 26.5

  • Avanço e retorno MPA animados.
  • Entrada reversa confirmou sw-slide-in-left.
  • Desktop de 1280px homologado.

Firefox 151

  • Direções do histórico classificadas corretamente.
  • Sem opt-in MPA, pageswap ou pagereveal neste motor.
  • Navegação direta funciona como fallback.

Contrato comum

  • Link, voltar, avançar e reload continuam funcionais.
  • Reload sempre retorna à direção neutral.
  • Sem erros de console ou overflow global.

Progressive enhancement

A navegação vem primeiro

Links permanecem links, foco permanece previsível e nenhuma transição serve como autorização ou estado de negócio.

O bundle inicial sw-mpa.min.js usa o tipo e os índices da Navigation API para classificar link, voltar e avançar sem comparar URLs. O estado validado é transportado por aba e aplicado antes do CSS. pagereveal e BFCache aprimoram o momento visual quando disponíveis; caso contrário, permanece o fade neutro ou a navegação direta.