La API de View Transition te permite actualizar el DOM en un solo paso y, al mismo tiempo, genera una transición animada entre los dos estados.
Este tipo de transiciones eran una función muy solicitada por los desarrolladores, incluido yo, y creo que logramos ofrecerla de una manera que equilibra los buenos valores predeterminados con la extensibilidad y la personalización. Parece que nos felicitamos, 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 para probar los prototipos y brindar comentarios generaron un replanteamiento total. Gracias
Para familiarizarte con la función y probar algunas demostraciones, consulta nuestra guía. Si encuentras algo que no está cubierto, comunícate conmigo por Twitter o Mastodon, o bien por correo electrónico.
Actualmente, la API de View Transition solo está disponible en Chrome. Afortunadamente, se puede usar como una mejora progresiva. La guía incluye una función auxiliar que puedes usar en todos los navegadores, pero solo aquellos que admitan transiciones de vistas obtendrán la animación.
Desarrollamos esta función dentro del grupo de trabajo de CSS, con aportes de otros proveedores de navegadores y de terceros independientes. No sabemos si otros navegadores adoptarán las transiciones de View ni cuándo lo harán, pero presta atención a la posición de los estándares de Mozilla y a la de WebKit.
Pero aún no hemos terminado.
La funcionalidad que se incluye en Chrome 111 es solo la primera versión. Esperamos que ya hayamos encontrado todos los errores, pero notifícalos en crbug.com, de preferencia con una demostración reducida. Si no te familiarizaste con este tema, comunícate conmigo por Twitter, Mastodon o por correo electrónico, y te ayudaré.
Este lanzamiento es una pequeña parte de un panorama más amplio, pero esperamos que sea útil. Ya dibujamos algunas extensiones para esta función para asegurarnos de que las piezas que enviaremos hoy sean compatibles con el futuro.
Aquí tienes un adelanto de lo que estamos pensando. Estas no están en orden de prioridad (quizás la primera sea la más importante para muchas personas), por lo que nos gustaría recibir comentarios sobre qué incorporaciones son las más importantes para ti.
Transiciones entre documentos
Creo que la mayoría de los desarrolladores quieren que trabajemos en este tema a continuación, y la buena noticia es que ya estamos trabajando en él.
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í lo indicará.
Nuestro prototipo de esto detrás de la marca chrome://flags/#view-transition-on-navigation. A continuación, se incluye una demostración muy simple y una demostración más compleja.
Para avanzar, necesitamos 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 que sea más fácil saber desde qué tipo de página estás haciendo la transición, preferentemente sin la necesidad de escribir JavaScript.
Hay mucho trabajo por hacer, y preferimos hacerlo “correcto” en lugar de “rápido”, pero sin duda es una prioridad para nosotros.
Animaciones basadas en compositores
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 las cargas de páginas.
Planeamos detectar las animaciones predeterminadas y las personalizaciones comunes y, luego, volver a interpretarlas como animaciones basadas en el compositor para mejorar el rendimiento.
Transiciones con alcance
En este momento, las transiciones de SPA se aplican a todo el documento y solo se puede ejecutar una transición a la vez. Queremos presentar una función que permite que las transiciones tengan alcance a un elemento en particular, de modo que varios componentes de la página puedan ejecutar transiciones de forma independiente.
Esto permitiría, por ejemplo, que un reproductor de video incorporado utilice transiciones de vistas, al mismo tiempo que un widget de chat incorporado.
Grupos de transición anidados
En este momento, todos los ::view-transition-group son elementos del mismo nivel. Esto suele ser bueno, ya que permite que las vistas pasen de un contenedor a otro, y no tienes que preocuparte por el recorte.
Sin embargo, a veces deseas que algún padre recorte una vista, lo que también puede estar involucrado en la transición.
Queremos investigar una habilitación que coloque un ::view-transition-group específico dentro de otra ::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" en cualquier lado del cambio de DOM, incluso si no es literalmente el mismo elemento.
Sin embargo, en ocasiones, los elementos con diferentes view-transition-name deben usar el mismo tipo de animación. En este momento, esto significa agregar una regla de selección para cada view-transition-name.
Quisiéramos agregar una forma de crear clases de transiciones para superar esta limitación.
Ignora 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 le das un view-transition-name a un encabezado y pasas de un estado en el que te desplazas 2,000 píxeles hacia abajo, a un estado en la parte superior de la página, el encabezado se animará desde 2,000 píxeles de distancia, lo que parece incorrecto en términos de sincronización.
En cambio, nos gustaría agregar una opción de habilitación en la que se ignorará un elemento, como si no tuviera un view-transition-name, si estuviera completamente fuera del viewport.
Ya puedes hacerlo con JavaScript si configuras style.viewTransitionName de forma dinámica, pero parece que debemos tener una solución declarativa para ello.
Animaciones basadas en requestAnimationFrame
Ya puedes crear animaciones de transición de vistas con JavaScript a través de la API de animaciones web, pero a veces necesitas conducir elementos fotograma por fotograma con requestAnimationFrame.
Ya pueden hacerlo, pero es un poco complicado. Aquí tienes una demostración con algunos asistentes que podrían resultarte útiles. ¡No queremos que sea un hacker!
Lo haremos en dos partes. En primer lugar, puedes proporcionar una API para indicar cuándo finaliza la animación. Y, segundo, proporciona acceso de JavaScript a los seudoelementos. Esa segunda parte puede ser un trabajo bastante importante, pero parece lo correcto a largo plazo.
Ahora, crea algunas transiciones de vistas increíbles.
Espero que al igual que yo te guste el presente y el futuro de esta función. Si tienes algún comentario o simplemente quieres mostrar algunas de las transiciones de vistas que realizaste, ya sean suaves y funcionales, o simplemente sencillas estúpidas, comunícate conmigo en Twitter o Mastodon.