CSS View Transitions: Uma forma nova e fácil de animar o seu sítio Web

Neste post, exploramos um novo recurso de animação CSS que está sendo lançado atualmente, conhecido como CSS View Transitions. Veremos como as CSS View Transitions facilitam a adição de animações suaves e envolventes a qualquer sítio WordPress ou WooCommerce.

Na semana passada, estivemos presentes WordCamp Cidade do Cabo 2023 na África do Sul. A comunidade local do WordPress foi absolutamente inspiradora com oradores inspiradores, comida deliciosa e vistas de cortar a respiração! Assistimos a palestras fantásticas de líderes de pensamento locais, cobrindo tudo o que se espera ouvir num WordCamp. Estas incluíram histórias maravilhosas de como as pessoas construíram os seus negócios com o WordPress, como o WordPress mudou as suas vidas, e numerosos conhecimentos sobre publicação e comércio eletrónico. Uma apresentação de destaque foi uma palestra sobre CSS View Transitions por Schalk Venter.

Título O futuro da animação na Web, apresentava uma imagem nostálgica recapitular sobre os primórdios da Internet, a sua evolução e o seu estado atual. Reflectindo sobre tecnologias passadas como Flash e Lightspeed salientou o nosso progresso e as mudanças significativas que a Web sofreu. A palestra também enfatizou a simplicidade e o poder do Transições de visualização CSS que me pareceu muito interessante e que vale a pena partilhar convosco, uma vez que pode ser facilmente adicionado a qualquer local do evento.

O que são transições de visualização CSS?

As transições de visualização CSS são uma nova API introduzido para melhorar as animações Web, facilitando a criação de transições suaves entre diferentes estados de uma página Web. Esta funcionalidade permite aos programadores definir transições entre diferentes vistas ou elementos de uma página sem necessitar de JavaScript complexo ou de codificação manual da animação.

O vídeo a seguir demonstra como as transições de páginas e elementos podem ser adicionadas a um site padrão WordPress e WooCommerce. Ao fazer a transição entre páginas, a nova página aparecerá enquanto a página antiga desaparece. Ao filtrar a página de produtos, os itens com o mesmo nome de transição serão animados para a sua nova posição. Tudo isto é conseguido utilizando apenas algumas linhas de CSS!

Principais características das transições de visualização CSS

• Sintaxe declarativa: Defina transições diretamente no seu CSS sem depender fortemente do JavaScript.
• Suporte para vários navegadores: Suportado pela maioria dos browsers modernos, estando previsto para breve o suporte do Firefox.
• Otimização do desempenho: As transições são optimizadas para desempenho, proporcionando uma experiência de utilizador mais suave.

Exemplo básico

O que torna as CSS View Transitions tão interessantes é a facilidade com que podem ser aplicadas ao seu site. Por exemplo, basta adicionar o seguinte CSS ao seu site para que o navegador se desvaneça entre os carregamentos de página, criando instantaneamente uma experiência mais suave e semelhante a uma aplicação.

@view-transition { navigation: auto; }

Animação de elementos específicos

Pode ainda dar um passo em frente e animar um item entre carregamentos de página especificando o nome do item. Por exemplo, o código seguinte criará um efeito de transição para uma miniatura de uma publicação com um ID de #post-1234. A miniatura será elegantemente animada da página de listagem de publicações para a página de visualização de publicações, tudo isto utilizando uma única linha de código.

#post-1234 .wp-post-image { view-transition-name: item-1 }

Suporte do navegador e estado das normas

A API ainda é bastante experimental e atualmente é suportada pelas versões mais recentes do Chrome, Edge, Opera e o navegador Android. O Safari tem demonstrou interesse positivoe existe um bilhete aberto para Adoção do Firefox. Temos de esperar pelo apoio formal destes dois últimos navegadores antes de utilizar a API num ambiente de produção.

Casos práticos de utilização do WordPress e do WooCommerce

1. Páginas do produto: Melhore a experiência do utilizador animando as imagens dos produtos entre a listagem de produtos e as páginas de pormenor dos produtos.
2. Menus de navegação: Crie transições suaves entre as diferentes secções do seu sítio Web, tornando a navegação mais intuitiva e envolvente.
3. Actualizações de conteúdos: Anime as alterações no seu conteúdo, como excertos de publicações de blogue ou imagens em destaque, para proporcionar uma experiência mais dinâmica aos seus leitores.

Conclusão

As CSS View Transitions são uma óptima ferramenta para adicionar ao seu kit e algo que suspeito que vamos ver muito mais num futuro próximo. Oferecem uma forma simples mas poderosa de melhorar a experiência do utilizador através de animações suaves e envolventes. Quer esteja a trabalhar num blogue pessoal, num site de negócios ou numa plataforma de comércio eletrónico, as CSS View Transitions podem ajudá-lo a criar uma presença na Web mais polida e interactiva.