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

Bramus

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 de esto, compartimos algunas mejoras que te permiten trabajar más fácilmente con las transiciones de vistas en general.

• Se comparten estilos de animación entre pseudoelementos de transición de vistas con view-transition-class.
• Transiciones de vistas selectivas con tipos activos

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

Transiciones de vista entre documentos para MPA

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

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

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

Para habilitar las transiciones de vista entre documentos, se debe habilitar la opción en ambos extremos. 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 vistas entre documentos, usa los eventos pageswap y pagereveal, que te otorgan acceso al objeto de transición de vistas.

• Con pageswap, puedes hacer algunos cambios de último minuto en la página de salida, 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 que se inicialice.

En ambos eventos, tienes acceso a un objeto NavigationActivation para personalizar una transición de vista de varios documentos en función de las entradas del historial de destino anteriores y nuevas, o del tipo de navegación.

Además, puedes esperar a que se cargue el contenido con el bloqueo de renderización y depender de 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).

Esta es una MPA con navegaciones entre documentos, alojada 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

Si necesitas más información para activar y personalizar transiciones de vistas entre documentos, consulta nuestra documentación sobre transiciones de vistas entre documentos.

Mejoras en las transiciones de vistas

Además de incluir transiciones de vistas entre documentos para la MPA, Chrome también incluye algunas mejoras para trabajar con transiciones de vistas en general.

Estas mejoras se aplican a las transiciones de vistas del mismo documento para SPA y a las transiciones de vistas de diferentes documentos para la MPA.

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

Hasta ahora, cuando se animaban varias instantáneas de la misma manera, debías orientar cada una de ellas de forma individual y repetir su seudoselector para cada elemento que tuviera 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 da como resultado selectores mucho más simples, que 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 la misma sincronización de animación a muchas instantáneas mediante 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 para ver las transiciones es la introducción de agregar 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 vas a la página siguiente o anterior en una secuencia de paginación, es posible que quieras usar diferentes animaciones en función de si vas a una página superior o una inferior 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 debes realizar una limpieza después de que se hayan completado 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 se realiza la transición.

Para las transiciones de vista del mismo documento, pasa 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 realizar una transición de vista entre documentos, configura los tipos en la regla arroba @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 configurados, puedes responder a estos tipos en tu CSS mediante los selectores de seudoclase :active-view-transition-type() y :active-view-transition que se aplican a la raíz de transición de vistas.

/* 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 vistas, consulta la documentación dedicada a las transiciones de vistas del mismo documento y a las transiciones de vistas entre documentos.

Comentarios

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

Si te encuentras con un error, informa un error en Chromium en su lugar.