A API View Transition permite atualizar o DOM em uma única etapa, gerando uma transição animada entre os dois estados.
Esse tipo de transição era um recurso muito solicitado pelos desenvolvedores, como eu, e acho que conseguimos fazer isso de uma forma que equilibra bons padrões com extensibilidade e personalização. Parece que estamos nos esforçando, mas o feedback dos desenvolvedores foi fundamental para o design desse recurso. Um protótipo anterior desse recurso era muito menos flexível, e pessoas (como você) que dedicaram tempo para testar os protótipos e dar feedback desencadearam um repensamento total. Valeu!
Para usar o recurso e testar algumas demonstrações, confira nosso guia. Se você acha que algo não foi abordado aqui, entre em contato comigo no Twitter, Mastodon ou por e-mail.
No momento, a API View Transition só está disponível no Chrome. Felizmente, ela pode ser usada como um aprimoramento progressivo. O guia inclui uma função auxiliar que você pode usar em vários navegadores, mas a animação será exibida apenas aos navegadores com suporte a transições de visualização.
Desenvolvemos esse recurso no grupo de trabalho do CSS com a contribuição de outros fornecedores de navegadores e independentes. Não sabemos se ou quando outros navegadores adotarão as transições de visualização, mas fique de olho na posição padrão do Mozilla e posição dos padrões do WebKit (links em inglês).
Mas ainda não terminamos!
A funcionalidade de destino no Chrome 111 é apenas a primeira versão. Esperamos ter encontrado todos os bugs, mas você pode registrar os problemas que encontrar em crbug.com, de preferência com uma demonstração reduzida. Se você não estiver familiarizado com isso, entre em contato comigo no Twitter, Mastodon ou por e-mail, e eu posso ajudar.
Este lançamento é uma parte pequena, mas espera-se útil, de um quadro maior. Já esboçamos algumas extensões desse recurso para garantir que as peças que estamos enviando hoje sejam compatíveis com o futuro.
Aqui está uma prévia do que estamos pensando. Elas não estão em ordem de prioridade (bem, talvez a primeira seja a mais importante para muitas pessoas). Por isso, gostaríamos de receber feedback sobre quais adições são mais importantes para você.
Transições entre documentos
Acho que a maioria dos desenvolvedores quer essa solução em seguida, e a boa notícia é que já estamos trabalhando nisso.
A API View Transitions foi criada para funcionar em documentos da mesma origem. A única diferença é que, em vez de startViewTransition sinalizar a mudança de estado do DOM, a própria navegação vai sinalizar essa mudança.
Nosso protótipo atrás da flag chrome://flags/#view-transition-on-navigation. Esta é uma demonstração bem simples e uma mais complexa.
Para fazer isso no futuro, precisamos descobrir como cada página aceita a transição. No momento, estamos usando a metatag <meta name="view-transition" content="same-origin">, mas acreditamos que o CSS é uma opção melhor. Também queremos facilitar a identificação do tipo de página da qual você está fazendo a transição, de preferência sem precisar escrever em JavaScript.
Há muito trabalho a fazer e preferimos chegar "certo" em vez de "rápido", mas é definitivamente uma prioridade para nós.
Animações orientadas por compostos
Escolhemos animar a largura e a altura nos grupos de transição por padrão porque isso é muito mais fácil de personalizar. No entanto, isso significa que a animação é executada na linha de execução principal, o que não é o ideal, especialmente durante os carregamentos de página.
Planejamos detectar as animações padrão e personalizações comuns e reinterpretá-las como animações orientadas pelo compositor para um bom aumento de desempenho.
Transições com escopo
No momento, o escopo das transições de SPA é definido para todo o documento, e apenas uma transição pode ser executada por vez. Queremos introduzir um recurso que permita que as transições tenham o escopo de um elemento específico para que vários componentes da página possam executar transições de maneira independente.
Isso permite, por exemplo, que um player de vídeo incorporado use transições de visualização ao mesmo tempo que um widget de chat incorporado.
Grupos de transição aninhados
No momento, todas as ::view-transition-groups são irmãs. Isso geralmente é positivo, porque permite que as visualizações façam a transição de um contêiner para outro, sem que você precise se preocupar com cortes.
No entanto, às vezes você quer que uma visualização seja cortada por algum pai, o que também pode estar envolvido na transição.
Queremos investigar uma ativação que coloca um ::view-transition-group específico em outro ::view-transition-group.
Classes de transições
Cada view-transition-name precisa ser único. É assim que identificamos que um elemento específico é conceitualmente "o mesmo" em ambos os lados da mudança do DOM, mesmo que não seja literalmente o mesmo elemento.
No entanto, às vezes, itens com view-transition-names diferentes precisam usar o mesmo tipo de animação. No momento, isso significa adicionar uma regra de seleção para cada view-transition-name.
Gostaríamos de adicionar uma maneira de criar classes de transições para superar essa limitação.
Ignorar elementos fora da tela
Se você atribuir um view-transition-name a um elemento, ele estará envolvido na transição como o próprio grupo. Às vezes, isso não é o ideal. Por exemplo, se você atribuir uma view-transition-name a um cabeçalho e passar de um estado em que a rolagem é 2.000 pixels para baixo, para um estado na parte de cima da página, o cabeçalho será animado a partir de 2.000 pixels de distância, o que não parece correto em termos de tempo.
Em vez disso, gostaríamos de adicionar uma ativação em que um elemento será ignorado, como se não tivesse um view-transition-name, se estiver totalmente fora da janela de visualização.
Já é possível fazer isso com JavaScript definindo style.viewTransitionName dinamicamente, mas parece que precisamos ter uma solução declarativa para isso.
Animações orientadas a requestAnimationFrame
Você já pode criar animações de transição de visualização com JavaScript usando a API Web Animation, mas às vezes é preciso direcionar elementos frame a frame com requestAnimationFrame.
Você já pode fazer isso, mas é um pouco "complicado". Veja uma demonstração com alguns ajuda que podem ser úteis. Queremos que ele não seja hackeado!
Vamos fazer isso em duas partes. Primeiro, com uma API para indicar quando a animação foi concluída. E segundo: fornecendo acesso JavaScript a pseudoelementos. Essa segunda parte pode ser um grande trabalho, mas parece a coisa certa a fazer a longo prazo.
Agora, faça ótimas transições de visualização!
Espero que você, assim como eu, esteja empolgado sobre o presente e o futuro desse recurso. Se você tiver algum feedback ou só quiser mostrar algumas transições de visualização que você fez, sejam lisas e funcionais ou simples falsas, entre em contato comigo no Twitter ou Mastodon.