Por que as transições de visualização não funcionam com pseudo classes em JavaScript

No desenvolvimento de interfaces modernas, as transições visuais são essenciais para uma experiência mais fluida. Porém, ao usar view transitions com pseudo-classes como :checked em combinações com JavaScript, muitos enfrentam dificuldades.

O exemplo clássico é um checkbox que ao ser marcado deveria mover elementos na tela com uma transição suave. Mas o problema é que a API de view transition não reconhece esses pseudo-estados ao serem manipulados via classes ou estilos dinâmicos. A decisão fica mais saudável quando o time consegue medir o impacto depois.

A solução prática que encontrei é evitar tentar aplicar a transição diretamente na pseudo-classe. Em vez disso, altere uma classe do elemento pai ou do container que envolva o estado desejado, e use essa classe como gatilho para a transição. Sem esse critério, a solução pode parecer simples no começo e cara no suporte. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco.

Por exemplo, ao invés de fazer :has(.checked), você pode criar uma classe ativo no container, que é adicionada pelo JavaScript ao marcar o checkbox. Assim, a transição reconhece e executa normalmente. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar. A decisão fica mais saudável quando o time consegue medir o impacto depois.

Esse método exige um pouco mais de controle no código, mas garante o feedback visual desejado. No seu time já passaram por isso? Como vocês lidam com transições em elementos com estados dinâmicos? Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar. A decisão fica mais saudável quando o time consegue medir o impacto depois. Sem esse critério, a solução pode parecer simples no começo e cara no suporte. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco.