En este tutorial vamos a crear un efecto de transición entre los productos de una tienda online y las fichas de producto.
Las transiciones y las animaciones están revolucionando la web, ofreciendo una mejor experiencia de usuario. Hablamos del futuro de la programación web, donde cada vez se consiguen mejores resultados y con mayor fluidez. Esto hace que las páginas web cobren vida.
la View Transitions API, es una característica nueva (experimental) que proporciona una forma mucho más sencilla de manejar los cambios del DOM necesarios y las animaciones de transición de estado. Haciendo que los elementos se fusiones entre ellos obteniendo un resultado bastante agradable para las usuarios.
A día de hoy, aunque el soporte en los navegadores no es del 100%, es una buena idea empezar a implementar este tipo de transiciones nativas en los sitios web por alguna de estas razones:
- Retrocompatibilidad
No todos los navegadores tienen soporte para la View Transition API pero su implementación no afectará en la navegación y el funcionamiento de la web actual. Simplemente se comportará como viene haciéndese hasta ahora. - Compatible en WordPress Se puede utilizar en proyectos hechos en WordPress y no requiere de la utilización de Javascript.
- Mejor experiencia de usuario El usuario no percibirá el parpadeo que se produce cuando un enlace se activa para redirigir a otra URL.
- Relación de elementos Comunica la dirección de flujos y deja claros que elementos están relacionados entre si.
¿Qué soporte tiene hasta la fecha?
¿Cómo funcionan las transiciones en la web?
- Primero conserva los antiguos elementos del DOM, el navegador hace una imagen del contenido utilizando pseudoelementos CSS.
- Seguidamente crea los nuevos elementos en el DOM agregándolos a la página y asegurando de que estos estén ubicados en el lugar que les corresponda.
- Ejecuta una animación fusionando el contenido antiguo con el contenido nuevo.
- Finaliza reemplazando los elementos de DOM antiguos con los nuevos.
Hasta ahora, esto se conseguía combinando Javascript y CSS para manejar todos los estados que necesita una buena transición, era muy complicado conseguir una animación totalmente fluida.
¿Cómo utilizar la View Transitions API en WordPress?
Primero, añadiremos la siguiente etiqueta en la cabecera de la página, es decir, dentro de la etiqueta <head> en el HTML. Se puede añadir a través del hook wp_head o directamente en el archivo header.php de tu tema hijo. Copia y pega el siguiente código.
<!-- Añade este código en el <head> de tu tema -->
<meta name="view-transition" content="same-origin"/>Únicamente con esta etiqueta <meta> y con un navegador con soporte de la API, ya obtendrás unas transiciones de página muy suaves. Tienes que saber que cuando cambiamos de estado, la API va a crear un árbol de pseudoelementos con todos los grupos de transiciones creadas. Como este:
/* Árbol de pseudolementos */
::view-transition
└─ ::view-transition-group(root)
└─ ::view-transition-image-pair(root)
├─ ::view-transition-old(root)
└─ ::view-transition-new(root)Si queremos que las transiciones no se hagan de forma genérica, es decir, que solo se ejecuten en ciertos componentes o elementos. Podemos utilizar la propiedad CSS view-transition-name para dar un nombre al elemento el cual vamos a personalizar su animación.
En el siguiente ejemplo haremos referencia a los productos de WooCommerce. Queremos que cuando hagan click en un producto de la tienda se cree una mejor experiencia de usuario gracias a una transición. «El name puede ser el que tu quieras».
.products.product {
view-transition-name: product;
}Todos los pseudoelementos del árbol anterior se pueden modificar con CSS, lo que nos permitirá personalizar estas animaciones mediante la opción nativa de CSS animate.
::view-transition-old(product) {
animation: fade 0.4s linear forwards;
}
::view-transition-new(product) {
animation: fade 0.5s linear reverse;
}
@keyframes fade {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(50px);
}
}Sabiendo la teoría te invito a que pongas transiciones en Títulos o imagen destacada de producto. Conseguirás un resultado muy profesional para tus tiendas online.
En el caso de las imágenes ten en cuenta si durante el estado va a cambiar es aspect-radio. De ser así tendrás que especificarlo cuando pase por ejemplo de un aspecto 1:1 a 16:9.
El el caso de los encabezados o títulos que cambian de tamaño ten en cuenta propiedades de CSS con fit-content.
Casos de usos:
- Transiciones entre el Blog y las entradas individuales. (Este blog lleva transiciones de página puedes comprobar la fusión de los elementos)
- Animación entre la tienda online y las fichas de producto.
- Ampliación de contenido en un modal o popover para un proyecto Portafolios.
- Crear presentaciones fluidas dentro de la web.
Inconvenientes
- Problemas de accesibilidad como la perdida de la posición de la lectura.
- Confusión de enfoque.
- Comportamiento extraño del lector al tener elementos del DOM antiguos y nuevos.
- Ten cuidado si vas a realizar una transición donde haya un video funcionando.
* Para solventar uno de los problemas de accesibilidad puedes añadir este código CSS, que desactiva las animaciones para aquellas personas que tienen habilitado en su navegador el movimiento reducido «reduce motion».
@media (prefers-reduced-motion) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none !important;
}
}Enlaces interesantes:
Animating Multi-Page Navigations with Browser View Transitions and Astro
