{"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":"transiciones-de-vista-css","status":"publish","type":"post","link":"https:\/\/www.fooevents.com\/es\/css-view-transitions\/","title":{"rendered":"Transiciones de vista CSS: Una forma nueva y sencilla de animar su sitio 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 Dise\u00f1o de la imagen de una bombilla\" 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\">En este art\u00edculo, exploraremos una nueva funci\u00f3n de animaci\u00f3n CSS que se est\u00e1 implementando actualmente, conocida como CSS View Transitions. Veremos c\u00f3mo las transiciones de vista CSS facilitan la adici\u00f3n de animaciones suaves y atractivas a cualquier sitio WordPress o WooCommerce.<\/p>\n<p>La semana pasada asistimos a <a href=\"https:\/\/capetown.wordcamp.org\/2024\/\" rel=\"nofollow noopener\" target=\"_blank\">WordCamp Ciudad del Cabo 2023<\/a> en Sud\u00e1frica. \u00a1La comunidad local WordPress absolutamente entregado con oradores inspiradores, deliciosa comida, y unas vistas impresionantes! Asistimos a fant\u00e1sticas charlas de l\u00edderes de opini\u00f3n locales, que abarcaron todo lo que cabr\u00eda esperar de un WordCamp. Incluyeron historias maravillosas de c\u00f3mo la gente construy\u00f3 sus negocios con WordPress, c\u00f3mo WordPress cambi\u00f3 sus vidas, y numerosas ideas en torno a la publicaci\u00f3n y el comercio electr\u00f3nico. Una presentaci\u00f3n destacada fue una charla 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=\"El equipo de FooEvents asiste a la charla CSS View Transitions en 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>Titulado <a href=\"https:\/\/capetown.wordcamp.org\/2024\/session\/css-view-transitions-the-future-of-animation-on-the-web\/\" rel=\"nofollow noopener\" target=\"_blank\">El futuro de la animaci\u00f3n en Internet<\/a>En \u00e9l aparec\u00eda un nost\u00e1lgico <a href=\"https:\/\/slides.com\/schalkventer\/css-view-animations\" rel=\"nofollow noopener\" target=\"_blank\">recapitular<\/a> de los inicios de Internet, su evoluci\u00f3n y su estado actual. Reflexionando sobre tecnolog\u00edas del pasado como <a href=\"https:\/\/en.wikipedia.org\/wiki\/Adobe_Flash\" rel=\"nofollow noopener\" target=\"_blank\">Flash<\/a> y Lightspeed destacaron nuestro progreso y los importantes cambios que ha experimentado la web. La charla tambi\u00e9n hizo hincapi\u00e9 en la sencillez y la potencia de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/View_Transitions_API\" rel=\"nofollow noopener\" target=\"_blank\">Transiciones de vista CSS<\/a> que me pareci\u00f3 muy interesante y digno de compartir con vosotros, ya que puede a\u00f1adirse f\u00e1cilmente a cualquier <a href=\"https:\/\/www.fooevents.com\/es\/vender-entradas\/\">lugar del evento<\/a>.<\/p>\n<h3><strong>\u00bfQu\u00e9 son las transiciones de vista CSS?<\/strong><\/h3>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/View_Transitions_API\" rel=\"nofollow noopener\" target=\"_blank\">Las transiciones de vista CSS son una nueva API<\/a> introducido para mejorar las animaciones web, facilitando la creaci\u00f3n de transiciones suaves entre diferentes estados de una p\u00e1gina web. Esta funci\u00f3n permite a los desarrolladores definir transiciones entre distintas vistas o elementos de una p\u00e1gina sin necesidad de JavaScript complejo ni codificaci\u00f3n manual de animaciones.<\/p>\n<p>El siguiente v\u00eddeo muestra c\u00f3mo a\u00f1adir transiciones de p\u00e1ginas y elementos a un sitio web est\u00e1ndar WordPress y WooCommerce. Al pasar de una p\u00e1gina a otra, la nueva p\u00e1gina aparece y la antigua desaparece. Al filtrar la p\u00e1gina de productos, los elementos con el mismo nombre de transici\u00f3n se animar\u00e1n a su nueva posici\u00f3n. Todo esto se consigue utilizando s\u00f3lo unas pocas l\u00edneas 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>Caracter\u00edsticas principales de las transiciones de vista CSS<\/strong><\/h3>\n<ul>\n<li><strong>Sintaxis declarativa:<\/strong> Defina las transiciones directamente en su CSS sin depender en gran medida de JavaScript.<\/li>\n<li><strong>Compatibilidad entre navegadores:<\/strong> Compatible con la mayor\u00eda de los navegadores modernos, y pr\u00f3ximamente con Firefox.<\/li>\n<li><strong>Optimizaci\u00f3n del rendimiento:<\/strong> El rendimiento de las transiciones est\u00e1 optimizado para ofrecer una experiencia de usuario m\u00e1s fluida.<\/li>\n<\/ul>\n<h3><strong>Ejemplo b\u00e1sico<\/strong><\/h3>\n<p>Lo que hace que las transiciones de vista CSS sean tan emocionantes, es lo f\u00e1cil que es aplicarlas a tu sitio. Por ejemplo, basta con a\u00f1adir el siguiente CSS a tu sitio para que el navegador se desvanezca a la perfecci\u00f3n entre las cargas de p\u00e1gina, creando al instante una experiencia m\u00e1s fluida y parecida a la de una aplicaci\u00f3n.<\/p>\n<pre>@view-transition { navegaci\u00f3n: auto; }<\/pre>\n<h3><strong>Animaci\u00f3n de elementos espec\u00edficos<\/strong><\/h3>\n<p>A continuaci\u00f3n, puede dar un paso m\u00e1s y <a href=\"https:\/\/github.com\/schalkventer\/css-view-transition-resources?tab=readme-ov-file#hello-world-examplesbasic-intro\" rel=\"nofollow noopener\" target=\"_blank\">animar un elemento entre cargas de p\u00e1gina<\/a> especificando el nombre del elemento. Por ejemplo, el siguiente c\u00f3digo crear\u00e1 un efecto de transici\u00f3n para una miniatura de una entrada con el ID #post-1234. La miniatura pasar\u00e1 elegantemente de la p\u00e1gina de lista de entradas a la p\u00e1gina de vista de entradas, todo ello utilizando una \u00fanica l\u00ednea de c\u00f3digo.<\/p>\n<pre>#post-1234 .wp-post-image { view-transition-name: item-1 }<\/pre>\n<h3><strong>Soporte de navegadores y estado de las normas<\/strong><\/h3>\n<p>La API es todav\u00eda bastante experimental y actualmente es compatible con las \u00faltimas versiones de Chrome, Edge, Opera y el navegador Android. Safari tiene <a href=\"https:\/\/github.com\/WebKit\/standards-positions\/issues\/48\" rel=\"nofollow noopener\" target=\"_blank\">han mostrado un inter\u00e9s positivo<\/a>y hay un ticket abierto para <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1823896\" rel=\"nofollow noopener\" target=\"_blank\">Adopci\u00f3n de Firefox<\/a>. Debemos esperar a que estos dos \u00faltimos navegadores ofrezcan soporte formal antes de utilizar la API en un entorno de producci\u00f3n.<\/p>\n<h3><strong>Casos pr\u00e1cticos de WordPress y WooCommerce<\/strong><\/h3>\n<ol>\n<li><strong>P\u00e1ginas de productos:<\/strong> Mejore la experiencia del usuario animando las im\u00e1genes de los productos entre el listado de productos y las p\u00e1ginas de detalles de los productos.<\/li>\n<li><strong>Men\u00fas de navegaci\u00f3n:<\/strong> Cree transiciones fluidas entre las distintas secciones de su sitio web, haciendo que la navegaci\u00f3n sea m\u00e1s intuitiva y atractiva.<\/li>\n<li><strong>Actualizaci\u00f3n de contenidos:<\/strong> Anime cambios en su contenido, como extractos de entradas de blog o im\u00e1genes destacadas, para ofrecer una experiencia m\u00e1s din\u00e1mica a sus lectores.<\/li>\n<\/ol>\n<h3><strong>Conclusi\u00f3n<\/strong><\/h3>\n<p>Las transiciones de vista CSS son una gran herramienta para a\u00f1adir a su kit y algo que sospecho que vamos a ver mucho m\u00e1s en un futuro pr\u00f3ximo. Ofrecen una forma sencilla pero potente de mejorar la experiencia del usuario a trav\u00e9s de animaciones suaves y atractivas. Tanto si trabajas en un blog personal como en un sitio web empresarial o en una plataforma de comercio electr\u00f3nico, las transiciones de vista CSS pueden ayudarte a crear una presencia web m\u00e1s pulida e interactiva.<\/p>\n<div class=\"highlight-box\">\n<h3><strong>Recursos adicionales<\/strong><\/h3>\n<p>Si desea obtener m\u00e1s informaci\u00f3n sobre las transiciones de vista CSS, consulte los siguientes art\u00edculos que incluyen m\u00e1s detalles 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\/es\/wp-json\/wp\/v2\/posts\/187095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fooevents.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fooevents.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/es\/wp-json\/wp\/v2\/users\/1138"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/es\/wp-json\/wp\/v2\/comments?post=187095"}],"version-history":[{"count":0,"href":"https:\/\/www.fooevents.com\/es\/wp-json\/wp\/v2\/posts\/187095\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/es\/wp-json\/wp\/v2\/media\/187148"}],"wp:attachment":[{"href":"https:\/\/www.fooevents.com\/es\/wp-json\/wp\/v2\/media?parent=187095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fooevents.com\/es\/wp-json\/wp\/v2\/categories?post=187095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fooevents.com\/es\/wp-json\/wp\/v2\/tags?post=187095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}