Las transiciones de vista en SvelteKit 1.24 han sido un tema candente en el mundo del desarrollo web recientemente, y con razón. Facilita el proceso de animación entre dos estados de página, lo cual es especialmente útil para las transiciones de página. Sin embargo, hasta ahora, no era fácil usar esta API en una aplicación SvelteKit, ya que era difícil integrarla en el ciclo de vida de la navegación. Con la llegada de SvelteKit 1.24, se introdujo un nuevo gancho de ciclo de vida llamado onNavigate para facilitar la integración de las transiciones de vista. ¡Vamos a explorar más a fondo esto!
Las transiciones de vista se activan al llamar a document.startViewTransition y pasarle un callback que actualiza el DOM de alguna manera. En nuestro caso, SvelteKit actualizará el DOM mientras el usuario navega. Una vez que el callback finaliza, el navegador hará la transición al nuevo estado de página; por defecto, realiza un fundido cruzado entre los estados antiguo y nuevo.
Detrás de escena, el navegador realiza una tarea realmente inteligente. Cuando comienza la transición, captura el estado actual de la página y toma una captura de pantalla. Luego mantiene esa captura en su lugar mientras se actualiza el DOM. Una vez que el DOM ha terminado de actualizarse, captura el nuevo estado y realiza una animación entre los dos estados.
Aunque actualmente solo está implementado en Chrome (y otros navegadores basados en Chromium), WebKit también lo favorece. Incluso si estás en un navegador no compatible, es un candidato perfecto para la mejora progresiva, ya que siempre podemos recurrir a una navegación sin animación. Es importante tener en cuenta que las transiciones de vista es una API del navegador, no de SvelteKit. onNavigate es la única API específica de SvelteKit que utilizaremos en este caso. ¡Todo lo demás se puede utilizar en cualquier parte donde escribas para la web!
Si estás interesado en saber más sobre la API de transiciones de vista, te recomiendo el artículo explicativo de Chrome de Jake Archibald.
Antes de aprender cómo escribir transiciones de vista, destaquemos la función que lo hace posible: onNavigate. Hasta hace poco, SvelteKit tenía dos funciones de ciclo de vida de navegación: beforeNavigate, que se dispara antes de que comience una navegación, y afterNavigate, que se ejecuta después de que la página se ha actualizado tras una navegación. SvelteKit 1.24 introduce una tercera función: onNavigate, que se ejecutará en cada navegación, inmediatamente antes de que se renderice la nueva página. Es importante destacar que se ejecutará después de que se haya completado la carga de datos de la página, ya que comenzar una transición de vista impide cualquier interacción con la página, por lo que queremos iniciarla lo más tarde posible.
Puedes detener la navegación hasta que se resuelva devolver una promesa de onNavigate, lo que nos permite esperar a que la transición de vista haya comenzado para completar la navegación.
En Q2BSTUDIO, nos especializamos en el desarrollo de aplicaciones a medida, software personalizado, servicios de inteligencia artificial y ciberseguridad, entre otros. Si estás buscando mejorar tus procesos empresariales con IA para empresas o necesitas optimizar tu inteligencia de negocio con soluciones como Power BI, ¡no dudes en contactarnos!