{"id":187095,"date":"2024-08-06T06:07:21","date_gmt":"2024-08-06T13:07:21","guid":{"rendered":"https:\/\/www.fooevents.com\/?p=187095"},"modified":"2024-08-07T00:42:05","modified_gmt":"2024-08-07T07:42:05","slug":"transicoes-de-visualizacao-css","status":"publish","type":"post","link":"https:\/\/www.fooevents.com\/pt\/css-view-transitions\/","title":{"rendered":"CSS View Transitions: Uma forma nova e f\u00e1cil de animar o seu s\u00edtio Web"},"content":{"rendered":"<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-large wp-image-187148\" src=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-1024x667.png\" alt=\"CSS View Transitions Desenho da imagem de uma l\u00e2mpada\" width=\"1024\" height=\"667\" title=\"\" srcset=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-1024x667.png 1024w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-300x195.png 300w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-768x500.png 768w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-18x12.png 18w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-512x333.png 512w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1.png 1161w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p class=\"blog-intro\">Neste post, exploramos um novo recurso de anima\u00e7\u00e3o CSS que est\u00e1 sendo lan\u00e7ado atualmente, conhecido como CSS View Transitions. Veremos como as CSS View Transitions facilitam a adi\u00e7\u00e3o de anima\u00e7\u00f5es suaves e envolventes a qualquer s\u00edtio WordPress ou WooCommerce.<\/p>\n<p>Na semana passada, estivemos presentes <a href=\"https:\/\/capetown.wordcamp.org\/2024\/\" rel=\"nofollow noopener\" target=\"_blank\">WordCamp Cidade do Cabo 2023<\/a> na \u00c1frica do Sul. A comunidade local do WordPress foi absolutamente inspiradora com oradores inspiradores, comida deliciosa e vistas de cortar a respira\u00e7\u00e3o! Assistimos a palestras fant\u00e1sticas de l\u00edderes de pensamento locais, cobrindo tudo o que se espera ouvir num WordCamp. Estas inclu\u00edram hist\u00f3rias maravilhosas de como as pessoas constru\u00edram os seus neg\u00f3cios com o WordPress, como o WordPress mudou as suas vidas, e numerosos conhecimentos sobre publica\u00e7\u00e3o e com\u00e9rcio eletr\u00f3nico. Uma apresenta\u00e7\u00e3o de destaque foi uma palestra sobre CSS View Transitions por <a href=\"https:\/\/www.schalkventer.me\/\" rel=\"nofollow noopener\" target=\"_blank\">Schalk Venter<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-187120 size-large\" src=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-1024x768.jpg\" alt=\"A equipa do FooEvents assiste \u00e0 palestra CSS View Transitions no WordCamp Cape Town 2024\" width=\"1024\" height=\"768\" title=\"\" srcset=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-1024x768.jpg 1024w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-300x225.jpg 300w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-768x576.jpg 768w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-1536x1152.jpg 1536w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-2048x1536.jpg 2048w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-16x12.jpg 16w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-512x384.jpg 512w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>T\u00edtulo <a href=\"https:\/\/capetown.wordcamp.org\/2024\/session\/css-view-transitions-the-future-of-animation-on-the-web\/\" rel=\"nofollow noopener\" target=\"_blank\">O futuro da anima\u00e7\u00e3o na Web<\/a>, apresentava uma imagem nost\u00e1lgica <a href=\"https:\/\/slides.com\/schalkventer\/css-view-animations\" rel=\"nofollow noopener\" target=\"_blank\">recapitular<\/a> sobre os prim\u00f3rdios da Internet, a sua evolu\u00e7\u00e3o e o seu estado atual. Reflectindo sobre tecnologias passadas como <a href=\"https:\/\/en.wikipedia.org\/wiki\/Adobe_Flash\" rel=\"nofollow noopener\" target=\"_blank\">Flash<\/a> e Lightspeed salientou o nosso progresso e as mudan\u00e7as significativas que a Web sofreu. A palestra tamb\u00e9m enfatizou a simplicidade e o poder do <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/View_Transitions_API\" rel=\"nofollow noopener\" target=\"_blank\">Transi\u00e7\u00f5es de visualiza\u00e7\u00e3o CSS<\/a> que me pareceu muito interessante e que vale a pena partilhar convosco, uma vez que pode ser facilmente adicionado a qualquer <a href=\"https:\/\/www.fooevents.com\/pt\/vender-bilhetes\/\">local do evento<\/a>.<\/p>\n<h3><strong>O que s\u00e3o transi\u00e7\u00f5es de visualiza\u00e7\u00e3o CSS?<\/strong><\/h3>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/View_Transitions_API\" rel=\"nofollow noopener\" target=\"_blank\">As transi\u00e7\u00f5es de visualiza\u00e7\u00e3o CSS s\u00e3o uma nova API<\/a> introduzido para melhorar as anima\u00e7\u00f5es Web, facilitando a cria\u00e7\u00e3o de transi\u00e7\u00f5es suaves entre diferentes estados de uma p\u00e1gina Web. Esta funcionalidade permite aos programadores definir transi\u00e7\u00f5es entre diferentes vistas ou elementos de uma p\u00e1gina sem necessitar de JavaScript complexo ou de codifica\u00e7\u00e3o manual da anima\u00e7\u00e3o.<\/p>\n<p>O v\u00eddeo a seguir demonstra como as transi\u00e7\u00f5es de p\u00e1ginas e elementos podem ser adicionadas a um site padr\u00e3o WordPress e WooCommerce. Ao fazer a transi\u00e7\u00e3o entre p\u00e1ginas, a nova p\u00e1gina aparecer\u00e1 enquanto a p\u00e1gina antiga desaparece. Ao filtrar a p\u00e1gina de produtos, os itens com o mesmo nome de transi\u00e7\u00e3o ser\u00e3o animados para a sua nova posi\u00e7\u00e3o. Tudo isto \u00e9 conseguido utilizando apenas algumas linhas de CSS!<\/p>\n<div style=\"width: 970px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-187095-1\" width=\"970\" height=\"720\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-Demo.mp4?_=1\" \/><a href=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-Demo.mp4\">https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-Demo.mp4<\/a><\/video><\/div>\n<h3><strong>Principais caracter\u00edsticas das transi\u00e7\u00f5es de visualiza\u00e7\u00e3o CSS<\/strong><\/h3>\n<ul>\n<li><strong>Sintaxe declarativa:<\/strong> Defina transi\u00e7\u00f5es diretamente no seu CSS sem depender fortemente do JavaScript.<\/li>\n<li><strong>Suporte para v\u00e1rios navegadores:<\/strong> Suportado pela maioria dos browsers modernos, estando previsto para breve o suporte do Firefox.<\/li>\n<li><strong>Otimiza\u00e7\u00e3o do desempenho:<\/strong> As transi\u00e7\u00f5es s\u00e3o optimizadas para desempenho, proporcionando uma experi\u00eancia de utilizador mais suave.<\/li>\n<\/ul>\n<h3><strong>Exemplo b\u00e1sico<\/strong><\/h3>\n<p>O que torna as CSS View Transitions t\u00e3o interessantes \u00e9 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\u00e7a entre os carregamentos de p\u00e1gina, criando instantaneamente uma experi\u00eancia mais suave e semelhante a uma aplica\u00e7\u00e3o.<\/p>\n<pre>@view-transition { navigation: auto; }<\/pre>\n<h3><strong>Anima\u00e7\u00e3o de elementos espec\u00edficos<\/strong><\/h3>\n<p>Pode ainda dar um passo em frente e <a href=\"https:\/\/github.com\/schalkventer\/css-view-transition-resources?tab=readme-ov-file#hello-world-examplesbasic-intro\" rel=\"nofollow noopener\" target=\"_blank\">animar um item entre carregamentos de p\u00e1gina<\/a> especificando o nome do item. Por exemplo, o c\u00f3digo seguinte criar\u00e1 um efeito de transi\u00e7\u00e3o para uma miniatura de uma publica\u00e7\u00e3o com um ID de #post-1234. A miniatura ser\u00e1 elegantemente animada da p\u00e1gina de listagem de publica\u00e7\u00f5es para a p\u00e1gina de visualiza\u00e7\u00e3o de publica\u00e7\u00f5es, tudo isto utilizando uma \u00fanica linha de c\u00f3digo.<\/p>\n<pre>#post-1234 .wp-post-image { view-transition-name: item-1 }<\/pre>\n<h3><strong>Suporte do navegador e estado das normas<\/strong><\/h3>\n<p>A API ainda \u00e9 bastante experimental e atualmente \u00e9 suportada pelas vers\u00f5es mais recentes do Chrome, Edge, Opera e o navegador Android. O Safari tem <a href=\"https:\/\/github.com\/WebKit\/standards-positions\/issues\/48\" rel=\"nofollow noopener\" target=\"_blank\">demonstrou interesse positivo<\/a>e existe um bilhete aberto para <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1823896\" rel=\"nofollow noopener\" target=\"_blank\">Ado\u00e7\u00e3o do Firefox<\/a>. Temos de esperar pelo apoio formal destes dois \u00faltimos navegadores antes de utilizar a API num ambiente de produ\u00e7\u00e3o.<\/p>\n<h3><strong>Casos pr\u00e1ticos de utiliza\u00e7\u00e3o do WordPress e do WooCommerce<\/strong><\/h3>\n<ol>\n<li><strong>P\u00e1ginas do produto:<\/strong> Melhore a experi\u00eancia do utilizador animando as imagens dos produtos entre a listagem de produtos e as p\u00e1ginas de pormenor dos produtos.<\/li>\n<li><strong>Menus de navega\u00e7\u00e3o:<\/strong> Crie transi\u00e7\u00f5es suaves entre as diferentes sec\u00e7\u00f5es do seu s\u00edtio Web, tornando a navega\u00e7\u00e3o mais intuitiva e envolvente.<\/li>\n<li><strong>Actualiza\u00e7\u00f5es de conte\u00fados:<\/strong> Anime as altera\u00e7\u00f5es no seu conte\u00fado, como excertos de publica\u00e7\u00f5es de blogue ou imagens em destaque, para proporcionar uma experi\u00eancia mais din\u00e2mica aos seus leitores.<\/li>\n<\/ol>\n<h3><strong>Conclus\u00e3o<\/strong><\/h3>\n<p>As CSS View Transitions s\u00e3o uma \u00f3ptima ferramenta para adicionar ao seu kit e algo que suspeito que vamos ver muito mais num futuro pr\u00f3ximo. Oferecem uma forma simples mas poderosa de melhorar a experi\u00eancia do utilizador atrav\u00e9s de anima\u00e7\u00f5es suaves e envolventes. Quer esteja a trabalhar num blogue pessoal, num site de neg\u00f3cios ou numa plataforma de com\u00e9rcio eletr\u00f3nico, as CSS View Transitions podem ajud\u00e1-lo a criar uma presen\u00e7a na Web mais polida e interactiva.<\/p>\n<div class=\"highlight-box\">\n<h3><strong>Recursos adicionais<\/strong><\/h3>\n<p>Se quiser saber mais sobre as CSS View Transitions, consulte os seguintes artigos que incluem mais pormenores t\u00e9cnicos:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2023\/12\/view-transitions-api-ui-animations-part1\/\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/www.smashingmagazine.com\/2023\/12\/view-transitions-api-ui-animations-part1\/<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/schalkventer\/css-view-transition-resources\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/github.com\/schalkventer\/css-view-transition-resources<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/v\/view-transition\/\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/css-tricks.com\/almanac\/selectors\/v\/view-transition\/<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::view-transition\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::view-transition<\/a><\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=cGbKAqrul0w\" target=\"_blank\" rel=\"noopener\">https:\/\/www.youtube.com\/watch?v=cGbKAqrul0w<\/a><\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>In this post, we explore a new CSS animation feature currently being rolled out, known as CSS View Transitions. We&#8217;ll take a look at how CSS View Transitions make it easy to add smooth, engaging animations to any WordPress or WooCommerce site. Last week, we attended WordCamp Cape Town 2023 in South Africa. The local [&hellip;]<\/p>\n","protected":false},"author":1138,"featured_media":187148,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[49,53],"tags":[],"class_list":["post-187095","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-footips","category-howto"],"_links":{"self":[{"href":"https:\/\/www.fooevents.com\/pt\/wp-json\/wp\/v2\/posts\/187095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fooevents.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fooevents.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/pt\/wp-json\/wp\/v2\/users\/1138"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/pt\/wp-json\/wp\/v2\/comments?post=187095"}],"version-history":[{"count":0,"href":"https:\/\/www.fooevents.com\/pt\/wp-json\/wp\/v2\/posts\/187095\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/pt\/wp-json\/wp\/v2\/media\/187148"}],"wp:attachment":[{"href":"https:\/\/www.fooevents.com\/pt\/wp-json\/wp\/v2\/media?parent=187095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fooevents.com\/pt\/wp-json\/wp\/v2\/categories?post=187095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fooevents.com\/pt\/wp-json\/wp\/v2\/tags?post=187095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}