Dominando as Transições de Visualização CSS: Um Mergulho Profundo na Estilização de Pseudo-elementos

No cenário em constante evolução do desenvolvimento web, a busca por uma experiência de usuário contínua, fluida e envolvente é uma constante. Durante anos, os desenvolvedores têm se esforçado para preencher a lacuna entre a web e as aplicações nativas, especialmente no que diz respeito à suavidade das transições de página. A navegação web tradicional muitas vezes resulta num recarregamento brusco de página inteira — uma tela branca que quebra momentaneamente a imersão do usuário. As Aplicações de Página Única (SPAs) mitigaram isso, mas a criação de transições personalizadas e significativas permaneceu uma tarefa complexa e muitas vezes frágil, altamente dependente de bibliotecas JavaScript e de uma gestão de estado intrincada.

Eis que surge a API de Transições de Visualização CSS, uma tecnologia inovadora preparada para revolucionar a forma como lidamos com as alterações de UI na web. Esta poderosa API fornece um mecanismo simples, mas incrivelmente flexível, para animar entre diferentes estados do DOM, tornando mais fácil do que nunca criar as experiências polidas, semelhantes a aplicações, que os usuários esperam. No cerne do poder desta API está um conjunto de novos pseudo-elementos CSS. Estes não são os seus seletores típicos; são elementos dinâmicos e temporários gerados pelo navegador para lhe dar controlo granular sobre cada fase de uma transição. Este guia irá levá-lo a um mergulho profundo nesta árvore de pseudo-elementos, explorando como estilizar cada componente para construir animações deslumbrantes, performáticas e acessíveis para uma audiência global.

A Anatomia de uma Transição de Visualização

Antes de podermos estilizar uma transição, devemos entender o que acontece nos bastidores quando uma é acionada. Quando se inicia uma transição de visualização (por exemplo, chamando document.startViewTransition()), o navegador executa uma série de passos:

• Capturar Estado Antigo: O navegador tira um "instantâneo" do estado atual da página.
• Atualizar o DOM: O seu código então faz as suas alterações no DOM (por exemplo, navegar para uma nova visualização, adicionar ou remover elementos).
• Capturar Novo Estado: Assim que a atualização do DOM estiver completa, o navegador tira um instantâneo do novo estado.
• Construir a Árvore de Pseudo-elementos: O navegador então constrói uma árvore temporária de pseudo-elementos na sobreposição da página. Esta árvore contém as imagens capturadas dos estados antigo e novo.
• Animar: Animações CSS são aplicadas a estes pseudo-elementos, criando uma transição suave do estado antigo para o novo. O padrão é uma simples transição de esbatimento (cross-fade).
• Limpeza: Assim que as animações terminam, a árvore de pseudo-elementos é removida, e o usuário pode interagir com o novo DOM ativo.

A chave para a personalização é esta árvore de pseudo-elementos temporária. Pense nela como um conjunto de camadas numa ferramenta de design, colocadas temporariamente sobre a sua página. Você tem controlo CSS completo sobre estas camadas. Aqui está a estrutura com a qual irá trabalhar:

• ::view-transition
  • ::view-transition-group(*)
    • ::view-transition-image-pair(*)
      • ::view-transition-old(*)
      • ::view-transition-new(*)

Vamos analisar o que cada um destes pseudo-elementos representa.

O Elenco de Pseudo-elementos

::view-transition: Esta é a raiz de toda a estrutura. É um único elemento que preenche a viewport e fica sobre todo o outro conteúdo da página. Atua como o contêiner para todos os grupos em transição e é um ótimo lugar para definir propriedades gerais da transição, como duração ou função de temporização.

::view-transition-group(*): Para cada elemento em transição distinto (identificado pela propriedade CSS view-transition-name), um grupo é criado. Este pseudo-elemento é responsável por animar a posição e o tamanho do seu conteúdo. Se tiver um cartão que se move de um lado da tela para o outro, é o ::view-transition-group que está realmente a mover-se.

::view-transition-image-pair(*): Aninhado dentro do grupo, este elemento atua como um contêiner e uma máscara de recorte (clipping mask) para as visualizações antiga e nova. O seu papel principal é manter efeitos como border-radius ou transform durante a animação e gerir a animação de esbatimento (cross-fade) padrão.

::view-transition-old(*): Este representa o "instantâneo" ou a visualização renderizada do elemento no seu estado antigo (antes da alteração do DOM). Por padrão, anima de opacity: 1 para opacity: 0.

::view-transition-new(*): Este representa o "instantâneo" ou a visualização renderizada do elemento no seu novo estado (após a alteração do DOM). Por padrão, anima de opacity: 0 para opacity: 1.

A Raiz: Estilizando o Pseudo-elemento ::view-transition

O pseudo-elemento ::view-transition é a tela sobre a qual toda a sua animação é pintada. Como o contêiner de nível superior, é o local ideal para definir propriedades que devem ser aplicadas globalmente à transição. Por padrão, o navegador fornece um conjunto de animações, mas pode facilmente substituí-las.

Por exemplo, a transição padrão é um esbatimento (cross-fade) que dura 250 milissegundos. Se quiser alterar isso para todas as transições no seu site, pode visar o pseudo-elemento raiz:

::view-transition {

  animation-duration: 500ms;

  animation-timing-function: ease-in-out;

}

Esta regra simples agora faz com que todos os esbatimentos de página padrão demorem o dobro do tempo e usem uma curva 'ease-in-out', dando-lhes uma sensação ligeiramente diferente. Embora possa aplicar animações complexas aqui, geralmente é melhor usá-lo para definir temporização e easing universais, deixando os pseudo-elementos mais específicos tratarem da coreografia detalhada.

Agrupamento e Nomeação: O Poder de `view-transition-name`

De imediato, sem trabalho extra, a API de Transição de Visualização fornece um esbatimento (cross-fade) para a página inteira. Isso é gerido por um único grupo de pseudo-elementos para a raiz. O verdadeiro poder da API é desbloqueado quando se quer fazer a transição de elementos específicos e individuais entre estados. Por exemplo, fazer com que a miniatura de um produto numa página de listagem cresça e se mova de forma contínua para a posição da imagem principal do produto numa página de detalhes.

Para dizer ao navegador que dois elementos em diferentes estados do DOM são conceptualmente os mesmos, usa-se a propriedade CSS view-transition-name. Esta propriedade deve ser aplicada tanto ao elemento inicial como ao elemento final.

/* No CSS da página de listagem */

.product-thumbnail {

  view-transition-name: product-image;

}

/* No CSS da página de detalhes */

.main-product-image {

  view-transition-name: product-image;

}

Ao dar a ambos os elementos o mesmo nome único ('product-image' neste caso), você instrui o navegador: "Em vez de apenas esbater a página antiga para fora e a nova para dentro, crie uma transição especial para este elemento específico." O navegador irá agora gerar um ::view-transition-group(product-image) dedicado para gerir a sua animação separadamente do esbatimento da raiz. Este é o conceito fundamental que permite o popular efeito de transição "morphing" ou de "elemento compartilhado".

Nota Importante: Em qualquer momento durante uma transição, um view-transition-name deve ser único. Não pode ter dois elementos visíveis com o mesmo nome ao mesmo tempo.

Estilização Aprofundada: Os Pseudo-elementos Centrais

Com os nossos elementos nomeados, podemos agora mergulhar na estilização dos pseudo-elementos específicos que o navegador gera para eles. É aqui que pode criar animações verdadeiramente personalizadas e expressivas.

`::view-transition-group(name)`: O Movimentador

A única responsabilidade do grupo é fazer a transição do tamanho e posição do elemento antigo para o tamanho e posição do novo elemento. Ele não contém a aparência real do conteúdo, apenas a sua caixa delimitadora (bounding box). Pense nele como uma moldura em movimento.

Por padrão, o navegador anima as suas propriedades transform e width/height. Pode substituir isto para criar efeitos diferentes. Por exemplo, poderia adicionar um arco ao seu movimento, animando-o ao longo de um caminho curvo, ou fazê-lo aumentar e diminuir de escala durante o seu percurso.

::view-transition-group(product-image) {

  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}

Neste exemplo, estamos a aplicar uma função de easing específica apenas ao movimento da imagem do produto, fazendo com que pareça mais dinâmico e físico, sem afetar o esbatimento padrão do resto da página.

`::view-transition-image-pair(name)`: O Recortador e Esbatedor

Aninhado dentro do grupo em movimento, o image-pair contém as visualizações antiga e nova. Ele atua como uma máscara de recorte, portanto, se o seu elemento tiver um border-radius, o image-pair garante que o conteúdo permaneça recortado com esse raio durante toda a animação de tamanho e posição. A sua outra principal função é orquestrar o esbatimento (cross-fade) padrão entre o conteúdo antigo e o novo.

Pode querer estilizar este elemento para garantir consistência visual ou para criar efeitos mais avançados. Uma propriedade chave a considerar é isolation: isolate. Isto é crucial se planeia usar efeitos avançados de mix-blend-mode nos filhos (antigo e novo), pois cria um novo contexto de empilhamento e impede que a mistura afete elementos fora do grupo de transição.

::view-transition-image-pair(product-image) {

  isolation: isolate;

}

`::view-transition-old(name)` e `::view-transition-new(name)`: As Estrelas do Espetáculo

Estes são os pseudo-elementos que representam a aparência visual do seu elemento antes e depois da alteração do DOM. É aqui que a maior parte do seu trabalho de animação personalizada irá acontecer. Por padrão, o navegador executa uma animação simples de esbatimento (cross-fade) neles usando opacity e mix-blend-mode. Para criar uma animação personalizada, deve primeiro desativar a padrão.

::view-transition-old(name),

::view-transition-new(name) {

  animation: none;

}

Uma vez que a animação padrão é desativada, está livre para aplicar a sua própria. Vamos explorar alguns padrões comuns.

Animação Personalizada: Deslizar

Em vez de um esbatimento, vamos fazer o conteúdo de um contêiner deslizar para dentro. Por exemplo, ao navegar entre artigos, queremos que o texto do novo artigo deslize da direita para dentro, enquanto o texto antigo desliza para a esquerda para fora.

Primeiro, defina os keyframes:

@keyframes slide-from-right {

  from { transform: translateX(100%); }

  to { transform: translateX(0); }

}

@keyframes slide-to-left {

  from { transform: translateX(0); }

  to { transform: translateX(-100%); }

}

Agora, aplique estas animações aos pseudo-elementos antigo e novo para o elemento nomeado 'article-content'.

::view-transition-old(article-content) {

  animation: 300ms ease-out forwards slide-to-left;

}

::view-transition-new(article-content) {

  animation: 300ms ease-out forwards slide-from-right;

}

Animação Personalizada: Virada 3D

Para um efeito mais dramático, pode criar uma virada de cartão 3D. Isto requer animar a propriedade transform com rotateY e também gerir a backface-visibility.

/* O grupo precisa de um contexto 3D */

::view-transition-group(card-flipper) {

  transform-style: preserve-3d;

}

/* O image-pair também precisa de preservar o contexto 3D */

::view-transition-image-pair(card-flipper) {

  transform-style: preserve-3d;

}

/* A visualização antiga vira de 0 para -180 graus */

::view-transition-old(card-flipper) {

  animation: 600ms ease-in forwards flip-out;

  backface-visibility: hidden;

}

/* A visualização nova vira de 180 para 0 graus */

::view-transition-new(card-flipper) {

  animation: 600ms ease-out forwards flip-in;

  backface-visibility: hidden;

}

@keyframes flip-out {

  from { transform: rotateY(0deg); }

  to { transform: rotateY(-180deg); }

}

@keyframes flip-in {

  from { transform: rotateY(180deg); }

  to { transform: rotateY(0deg); }

}

Exemplos Práticos e Técnicas Avançadas

A teoria é útil, mas a aplicação prática é onde realmente aprendemos. Vamos percorrer alguns cenários comuns e como resolvê-los com os pseudo-elementos de transição de visualização.

Exemplo: A Miniatura de Cartão com "Morphing"

Esta é a transição clássica de elemento compartilhado. Imagine uma galeria de perfis de usuário. Cada perfil é um cartão com um avatar. Quando clica num cartão, navega para uma página de detalhes onde esse mesmo avatar é exibido de forma proeminente no topo.

Passo 1: Atribuir Nomes

Na sua página da galeria, a imagem do avatar recebe um nome. O nome deve ser único for cada cartão, por exemplo, com base no ID do usuário.

/* Em gallery-item.css */

.card-avatar { view-transition-name: avatar-user-123; }

Na página de detalhes do perfil, o avatar grande do cabeçalho recebe exatamente o mesmo nome.

/* Em profile-page.css */

.profile-header-avatar { view-transition-name: avatar-user-123; }

Passo 2: Personalizar a Animação

Por padrão, o navegador irá mover e escalar o avatar, mas também fará um esbatimento (cross-fade) do conteúdo. Se a imagem for idêntica, este esbatimento é desnecessário e pode causar uma ligeira cintilação. Podemos desativá-lo.

/* O asterisco (*) aqui é um curinga para qualquer grupo nomeado */

::view-transition-image-pair(*) {

  /* Desativar o esbatimento padrão */

  animation-duration: 0s;

}

Espere, se desativarmos o esbatimento, como é que o conteúdo muda? Para elementos compartilhados onde as visualizações antiga e nova são idênticas, o navegador é inteligente o suficiente para usar apenas uma visualização para toda a transição. O `image-pair` essencialmente contém apenas uma imagem, então desativar o esbatimento simplesmente revela esta otimização. Para elementos onde o conteúdo realmente muda, precisaria de uma animação personalizada em vez do esbatimento padrão.

Lidando com Mudanças na Proporção de Aspecto

Um desafio comum surge quando um elemento em transição muda a sua proporção de aspecto. Por exemplo, uma miniatura paisagem 16:9 numa página de listagem pode transitar para um avatar quadrado 1:1 na página de detalhes. O comportamento padrão do navegador é animar a largura e a altura de forma independente, o que resulta na imagem a aparecer esmagada ou esticada durante a transição.

A solução é elegante. Deixamos o ::view-transition-group tratar da mudança de tamanho e posição, mas substituímos a estilização das imagens antiga e nova dentro dele.

O objetivo é fazer com que os "instantâneos" antigo e novo preencham o seu contêiner sem distorcer. Podemos fazer isso definindo a sua largura e altura para 100% e permitindo que a propriedade padrão `object-fit` do navegador (que é herdada do elemento original) lide com o dimensionamento corretamente.

::view-transition-old(hero-image),

::view-transition-new(hero-image) {

  /* Evitar distorção preenchendo o contêiner */

  width: 100%;

  height: 100%;

  

  /* Substituir o esbatimento padrão para ver o efeito claramente */

  animation: none;

}

Com este CSS, o `image-pair` animará suavemente a sua proporção de aspecto, e as imagens dentro serão corretamente cortadas ou terão barras pretas (dependendo do seu valor de `object-fit`), tal como seriam num contêiner normal. Pode então adicionar as suas próprias animações personalizadas, como um esbatimento (cross-fade), sobre esta geometria corrigida.

Depuração e Suporte de Navegadores

Estilizar elementos que só existem por uma fração de segundo pode ser complicado. Felizmente, os navegadores modernos fornecem excelentes ferramentas de desenvolvimento para isso. No DevTools do Chrome ou Edge, pode ir ao painel "Animações" e, quando acionar uma transição de visualização, pode pausá-la. Com a animação pausada, pode então usar o painel "Elementos" para inspecionar toda a árvore de pseudo-elementos `::view-transition` tal como qualquer outra parte do DOM. Pode ver os estilos a serem aplicados e até modificá-los em tempo real para aperfeiçoar as suas animações.

No final de 2023, a API de Transições de Visualização é suportada em navegadores baseados em Chromium (Chrome, Edge, Opera). As implementações estão em andamento para o Firefox e o Safari. Isto torna-a uma candidata perfeita para melhoria progressiva (progressive enhancement). Os usuários com navegadores suportados obtêm uma experiência encantadora e melhorada, enquanto os usuários de outros navegadores obtêm a navegação padrão e instantânea. Pode verificar o suporte em CSS:

@supports (view-transition: none) {

  /* Todos os estilos de view-transition vão aqui */

  ::view-transition-old(my-element) { ... }

}

Melhores Práticas para uma Audiência Global

Ao implementar animações, é vital considerar a diversa gama de usuários e dispositivos em todo o mundo.

Desempenho: As animações devem ser rápidas e fluidas. Limite-se a animar propriedades CSS que são baratas para o navegador processar, principalmente transform e opacity. Animar propriedades como width, height ou margin pode desencadear recálculos de layout em cada frame, levando a engasgos e a uma má experiência, especialmente em dispositivos com menor poder de processamento.

Acessibilidade: Alguns usuários sentem enjoo de movimento ou desconforto com animações. Todos os principais sistemas operativos fornecem uma preferência do usuário para reduzir o movimento. Devemos respeitar isso. A media query prefers-reduced-motion permite desativar ou simplificar as suas animações para estes usuários.

@media (prefers-reduced-motion: reduce) {

  ::view-transition-group(*),

  ::view-transition-old(*),

  ::view-transition-new(*) {

    /* Ignorar todas as animações personalizadas e usar um esbatimento rápido e simples */

    animation: none !important;

  }

}

Experiência do Usuário (UX): Boas transições têm um propósito. Elas devem guiar a atenção do usuário e fornecer contexto sobre a mudança que está a acontecer na UI. Uma animação demasiado lenta pode fazer uma aplicação parecer lenta, enquanto uma demasiado vistosa pode ser uma distração. Apontar para durações de transição entre 200ms e 500ms. O objetivo é que a animação seja mais sentida do que vista.

Conclusão: O Futuro é Fluido

A API de Transições de Visualização CSS, e especificamente a sua poderosa árvore de pseudo-elementos, representa um salto monumental para as interfaces de usuário da web. Ela fornece aos desenvolvedores um conjunto de ferramentas nativo, performático e altamente personalizável para criar o tipo de transições fluidas e com estado que antes eram domínio exclusivo de aplicações nativas. Ao entender os papéis de ::view-transition, ::view-transition-group, e os pares de imagens antiga/nova, pode ir além de simples esbatimentos e coreografar animações intrincadas e significativas que melhoram a usabilidade e encantam os usuários.

À medida que o suporte dos navegadores se expande, esta API tornar-se-á uma parte essencial do kit de ferramentas do desenvolvedor front-end moderno. Ao abraçar as suas capacidades e aderir às melhores práticas de desempenho e acessibilidade, podemos construir uma web que não é apenas mais funcional, mas também mais bonita e intuitiva para todos, em todo o lugar.