La API de View Transition te permite actualizar el DOM en un solo paso y, al mismo tiempo, generar una transición animada entre los dos estados.
Este tipo de transiciones era una función que los desarrolladores, incluido yo, solicitaban con frecuencia, y creo que logramos implementarla de una manera que equilibra los valores predeterminados correctos con la extensibilidad y la personalización. Puede parecer que nos estamos dando palmaditas en la espalda, pero los comentarios de los desarrolladores fueron clave para el diseño de esta función. Un prototipo anterior de esta función era mucho menos flexible, y las personas (¿como tú?) que se tomaron el tiempo de jugar con los prototipos y proporcionar comentarios provocaron un replanteamiento total. ¡Gracias!
Para familiarizarte con la función y probar algunas demostraciones, consulta nuestra guía. Si crees que falta algo, comunícate conmigo en Twitter, Mastodon o por correo electrónico.
Actualmente, la API de View Transitions solo está disponible en Chrome. Por suerte, se puede usar como una mejora progresiva. La guía incluye una función de ayuda que puedes usar en todos los navegadores, pero solo los navegadores que admiten transiciones de vistas obtendrán la animación.
Desarrollamos esta función en el grupo de trabajo de CSS, con aportes de otros proveedores de navegadores y personas independientes. No sabemos si otros navegadores adoptarán las transiciones de vistas o cuándo lo harán, pero no pierdas de vista la posición de Mozilla con respecto a los estándares y la posición de WebKit con respecto a los estándares.
Pero aún no terminamos.
La funcionalidad que se lanzará en Chrome 111 es solo la primera versión. Esperamos haber encontrado todos los errores, pero si encuentras alguno, infórmalo en crbug.com, preferiblemente con una demostración reducida. Si no te sientes cómodo con esta opción, escríbeme por Twitter, Mastodon o correo electrónico, y te ayudaré.
Esta versión es una parte pequeña, pero esperamos que útil, de un panorama más amplio. Ya tenemos en mente algunas extensiones de esta función para garantizar que las piezas que enviamos hoy sean compatibles en el futuro.
Aquí tienes un adelanto de lo que tenemos en mente. No están en orden de prioridad (bueno, tal vez la primera sea la más importante para muchas personas), por lo que nos encantaría recibir comentarios sobre qué incorporaciones son las más importantes para ti.
Transiciones entre documentos
Creo que esta es la función que la mayoría de los desarrolladores quieren que trabajemos a continuación, y la buena noticia es que ya estamos trabajando en ella.
La API de View Transitions se diseñó para que pueda funcionar en documentos del mismo origen. La única diferencia es que, en lugar de que startViewTransition indique el cambio de estado del DOM, la navegación en sí indicará ese cambio.
Nuestro prototipo de esto detrás de la marca chrome://flags/#view-transition-on-navigation. Aquí tienes una demostración muy sencilla y una demostración más compleja.
Para continuar, debemos averiguar cómo cada página habilita la transición. En este momento, usamos una metaetiqueta: <meta name="view-transition" content="same-origin">, pero creemos que CSS es un mejor lugar para esto. También queremos facilitar la identificación del tipo de página desde la que realizas la transición, de preferencia, sin necesidad de escribir JavaScript.
Hay mucho trabajo por hacer, y preferimos que sea “correcto” en lugar de “rápido”, pero sin duda es una prioridad para nosotros.
Animaciones impulsadas por el compositor
Elegimos animar el ancho y la altura en los grupos de transición de forma predeterminada porque es mucho más fácil de personalizar. Sin embargo, esto significa que la animación se ejecuta en el subproceso principal, lo que no es ideal, en especial durante la carga de la página.
Planeamos detectar las animaciones predeterminadas y las personalizaciones comunes para, luego, reinterpretarlas como animaciones impulsadas por el compositor y lograr un aumento significativo del rendimiento.
Transiciones centradas
En este momento, las transiciones de SPA se aplican a todo el documento y solo se puede ejecutar una a la vez. Queremos presentar una función que permita que las transiciones se apliquen a un elemento en particular para que varios componentes de página puedan ejecutar transiciones de forma independiente.
Esto permitiría, por ejemplo, que un reproductor de video incorporado use transiciones de vista, al mismo tiempo que un widget de chat incorporado.
Grupos de transición anidados
En este momento, todos los ::view-transition-group son hermanos. Esto suele ser algo bueno, ya que permite que las vistas realicen la transición de un contenedor a otro, y no tienes que preocuparte por el recorte.
Sin embargo, a veces, deseas que un elemento superior recorte una vista, que también puede participar en la transición.
Queremos investigar una habilitación que coloque un ::view-transition-group en particular dentro de otro ::view-transition-group.
Clases de transiciones
Cada view-transition-name debe ser único. Así es como identificamos que un elemento en particular es conceptualmente “el mismo” a ambos lados del cambio del DOM, incluso si no es literalmente el mismo elemento.
Sin embargo, a veces, los elementos con view-transition-name diferentes deben usar el mismo tipo de animación. En este momento, esto significa agregar una regla de selector para cada view-transition-name.
Nos gustaría agregar una forma de crear clases de transiciones para superar esta limitación.
Ignora los elementos fuera de pantalla
Si le asignas un view-transition-name a un elemento, este participará en la transición como su propio grupo. A veces, esto no es lo ideal. Por ejemplo, si asignas un view-transition-name a un encabezado y pasas de un estado en el que te desplazaste hacia abajo 2, 000 píxeles a un estado en la parte superior de la página, el encabezado se animará desde 2, 000 píxeles de distancia, lo que se siente incorrecto en términos de tiempo.
En su lugar, nos gustaría agregar una habilitación en la que se ignore un elemento, como si no tuviera un view-transition-name, si está completamente fuera del viewport.
Ya puedes hacerlo con JavaScript configurando style.viewTransitionName de forma dinámica, pero parece que deberíamos tener una solución declarativa para esto.
Animaciones impulsadas por requestAnimationFrame
Ya puedes crear animaciones de transición de vistas con JavaScript a través de la API de animaciones web, pero, a veces, debes controlar todo fotograma por fotograma con requestAnimationFrame.
Ya puedes hacerlo, pero es un poco hackeado. Aquí tienes una demostración con algunas funciones auxiliares que podrían resultarte útiles. Queremos que no sea hackeado.
Lo haremos en dos partes. Uno, proporcionando una API para indicar cuándo se completa la animación. Y, segundo, proporcionando acceso de JavaScript a los pseudoelementos. Esa segunda parte puede ser un trabajo bastante grande, pero parece lo correcto a largo plazo.
Ahora, crea transiciones de vista increíbles.
Espero que, al igual que yo, te entusiasme el presente y el futuro de esta función. Si tienes comentarios o simplemente quieres mostrar algunas transiciones de vista que creaste, ya sean fluidas y funcionales o simplemente simples tontas, comunícate conmigo en Twitter o Mastodon.