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

Bramus

Publicado: 16 de mayo de 2024

En Google I/O 2024, anuncié el siguiente paso para las transiciones de vista: transiciones de vista entre documentos para aplicaciones de varias páginas (MPA).

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

• Cómo compartir estilos de animación entre pseudoelementos de transición de vistas con view-transition-class.
• Transiciones de vista selectivas con tipos activos.

Estas mejoras se aplican a las transiciones de vista dentro del mismo documento para las aplicaciones de una sola página (SPA) y a las transiciones de vista entre documentos para las 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 que tuvo una buena recepción en la comunidad de desarrollo web.

Nos encanta ver lo que muchos de ustedes crearon con las transiciones de vista. 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 crearas una SPA para usar las transiciones de vista. A partir de Chrome 126, esto ya no es así, ya que las transiciones de vista ahora están habilitadas de forma predeterminada para las navegaciones del mismo 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 habilitarlas. Para ello, usa la regla @ @view-transition y establece el descriptor navigation en auto.

@view-transition {
  navigation: auto;
}

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

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

• Con pageswap, puedes realizar algunos cambios de último momento en la página saliente justo antes de que se tomen las instantáneas antiguas.
• 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 entre documentos según las entradas del historial de destino anterior y nuevo, o el tipo de navegación.

Además, puedes esperar a que se cargue el contenido con el bloqueo de procesamiento y confiar en el procesamiento previo 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).

Se trata de una MPA con navegaciones entre documentos, alojada en el mismo origen. Cuando se usa pagereveal, el tipo de animación se determina en función de las entradas del historial de destino anterior y nuevo.

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.

Mejoras en las transiciones de vista

Además de lanzar las transiciones de vista entre documentos para las MPA, Chrome también incluye algunas mejoras para trabajar con las transiciones de vista en general.

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

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

Hasta ahora, cuando animabas varios snapshots de la misma manera, debías segmentar cada uno de ellos 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 seudoselectores para segmentar todas las instantáneas que coincidan. Esto genera selectores mucho más simples, que se ajustan 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 con un solo selector.

Para obtener más información sobre view-transition-class, lee la documentación dedicada a view-transition-class.

Transiciones de vista selectivas con tipos activos

Otra mejora en las transiciones de vistas es la introducción de la adición de tipos a una transición de vistas cuando se captura y se realiza. Esto facilita el trabajo con varias transiciones de vista en la misma página, sin las declaraciones de la que cambia 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 según si vas a una página superior o inferior de la secuencia.

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

Con los tipos de transición de vista, 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 vista. Los tipos solo se aplican cuando se captura o se realiza la transición.

Para las transiciones de vista en el 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 @@view-transition con el descriptor types o establécelos 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 pseudoclase :active-view-transition-type() y :active-view-transition, que se aplican a la raíz de la 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 transiciones de vista, consulta la documentación específica para las transiciones de vista en el 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 encuentras un error, informa un error de Chromium.