¿Cuáles son las novedades en las transiciones de vistas? (Actualización de Google I/O 2024)

Bramus

Fecha de publicación: 16 de mayo de 2024

En Google I/O 2024, anunciamos el próximo paso para las transiciones de vistas: las transiciones entre documentos para aplicaciones de varias páginas (MPA).

Además, compartí algunas mejoras que te permiten trabajar con más facilidad con las transiciones de vistas en general.

• Compartir estilos de animación entre pseudoelementos de transición de vista con view-transition-class
• Transiciones de vista selectivas con tipos activos

Estas mejoras se aplican a las transiciones de vista del mismo documento para aplicaciones de una sola página (SPA) y a las transiciones de vista entre documentos para MPA.

Transiciones de vista entre documentos para MPA

En Chrome 111, el equipo de Chrome lanzó las transiciones de vista del mismo documento para aplicaciones de una sola página, una función bien recibida en la comunidad de creación de sitios web.

Es genial ver lo que muchos de ustedes han creado con las transiciones de vistas. Van desde las implementaciones típicas que "hacen que la miniatura se convierta en la foto grande" hasta experiencias inmersivas altamente personalizadas, como esta de Airbnb. ¡Asombroso!

Sin embargo, la implementación inicial requería que compilaras un SPA para usar transiciones de vista. A partir de Chrome 126, ya no es así, ya que las transiciones de vista ahora están habilitadas de forma predeterminada para las navegaciones de origen. Ahora puedes crear una transición de vista entre dos documentos diferentes que tienen el mismo origen.

Para habilitar las transiciones de vista entre documentos, ambos extremos deben habilitar la función. Para ello, usa la regla arroba @view-transition y establece el descriptor navigation en auto.

@view-transition {
  navigation: auto;
}

Las transiciones de vista de varios documentos usan los mismos principios y componentes básicos que las transiciones de vistas del mismo documento. Se capturan los elementos con un view-transition-name aplicado y puedes personalizar las animaciones con animaciones de CSS.

Para personalizar las transiciones de vista entre documentos, usa los eventos pageswap y pagereveal, que te brindan acceso al objeto de transición de vista.

• Con pageswap, puedes realizar algunos cambios de último minuto en la página saliente justo antes de que se tomen las instantáneas anteriores.
• Con pagereveal, puedes personalizar la página nueva antes de que comience a renderizarse después de inicializarse.

En ambos eventos, tienes acceso a un objeto NavigationActivation para personalizar una transición de vista entre documentos según las entradas de historial de destino antiguas y nuevas, o el tipo de navegación.

Además, puedes esperar a que se cargue el contenido con el bloqueo de renderización y realizar la renderización previa para mejorar el tiempo de carga antes de que se ejecute la transición de vista.

Demostración

Esta demostración de Stack Navigator combina todas estas funciones (junto con algunas mejoras).

Este es un MPA con navegaciones entre documentos, alojado en el mismo origen. Cuando usas pagereveal, el tipo de animación se determina en función de las entradas del historial de destino nuevas y antiguas.

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition) {
    // Determine animation type based on the old/new history entries
    const transitionClass = determineTransitionClass(navigation.activation.from, navigation.currentEntry);
    document.documentElement.dataset.transition = transitionClass;

    // Cleanup after transition ran
    await e.viewTransition.finished;
    delete document.documentElement.dataset.transition;
  }
});

Leer la documentación

Para obtener más información sobre cómo activar y personalizar las transiciones de vista entre documentos, consulta nuestra documentación sobre transiciones de vista entre documentos.

Ver mejoras de las transiciones

Además de enviar transiciones de vista entre documentos para MPA, Chrome también incluye algunos perfeccionamientos para trabajar con transiciones de vista en general.

Estas mejoras se aplican a las transiciones de vista del mismo documento para SPA y a las transiciones de vista entre documentos para MPA.

Comparte estilos de animación con view-transition-class

Hasta ahora, cuando animabas varias instantáneas de la misma manera, debías segmentar cada una de ellas de forma individual repitiendo su seudoselector para cada elemento que tiene un view-transition-name único.

Con view-transition-class, ahora puedes agregar un nombre compartido a todas las instantáneas. Usa este nombre compartido en los pseudoselectores para apuntar a todas las instantáneas que coincidan. Esto genera selectores mucho más simples, que se escalan automáticamente de uno a muchos elementos.

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

En el siguiente ejemplo de tarjetas, se usa view-transition-class para aplicar el mismo tiempo de animación a muchas instantáneas con un selector.

Para obtener más información sobre view-transition-class, lee la documentación específica sobre view-transition-class.

Transiciones de vista selectiva con tipos activos

Otro perfeccionamiento de las transiciones de vista es la introducción de la adición de tipos a una transición de vista cuando se captura y se realiza. Esto facilita el trabajo con varias transiciones de vistas en la misma página, sin que las declaraciones de una cambien a la otra.

Por ejemplo, cuando vayas a la página siguiente o anterior en una secuencia de paginación, te recomendamos que uses animaciones diferentes según si vas a una página más alta o más baja de la secuencia.

Antes de los tipos activos, podías agregar clases al DOM y responder a ellas en tu CSS. Sin embargo, también tendrías que realizar una limpieza después de que se completen las transiciones.

Con los tipos de transición de vistas, puedes lograr el mismo resultado, con el beneficio adicional de que estos tipos se limpian automáticamente una vez que finaliza la transición de vistas. Los tipos solo se aplican cuando se captura o realiza la transición.

Para las transiciones de vista del mismo documento, pasa el types al método startViewTransition, que ahora acepta un objeto. update es la función de devolución de llamada que actualiza el DOM y types es una secuencia de cadenas.

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
}););

Para una transición de vista entre documentos, establece tipos en la regla de anidación @view-transition con el descriptor types o configúralos sobre la marcha en los eventos pageswap y pagereveal.

@view-transition {
  navigation: auto;
  types: slide, forwards;
}

Con los tipos establecidos, puedes responder a estos tipos en tu CSS con los selectores de seudoclase :active-view-transition-type() y :active-view-transition que se aplican a la raíz de transición de vista.

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

Para obtener más información sobre los tipos de transición de vista, consulta la documentación específica para las transiciones de vista del mismo documento y las transiciones de vista entre documentos.

Comentarios

Siempre agradecemos los comentarios de los desarrolladores. Para ello, informa un problema al grupo de trabajo de CSS en GitHub con sugerencias y preguntas. Agrega el prefijo [css-view-transitions] a tu problema.

Si experimentas un error, informa un error en Chromium en su lugar.