¿Cómo mejoraría progresivamente una aplicación de varias páginas con la View Transition API?

Pregunta y escenario

El sitio utiliza enlaces comunes entre páginas del mismo origen renderizadas por el servidor. El objetivo es una transición continua donde sea compatible, con navegación nativa en todo lo demás. Una respuesta sólida cubre ambos mecanismos de transición, fallas en la actualización, navegación en el historial, foco, posición de desplazamiento y preferencias de movimiento reducido.

Qué está evaluando el entrevistador

• ¿Puede el candidato distinguir las actualizaciones en el mismo documento con document.startViewTransition() de la navegación entre documentos habilitada mediante @view-transition?
• ¿Entiende que la API es una capa de mejora en lugar de un reemplazo para enlaces, historial o renderizado en el servidor?
• ¿Puede aplicar detección de características, alternativas ante fallas y prefers-reduced-motion de forma segura?
• ¿Puede probar los pseudoelementos de transición, la gestión del foco, los dispositivos lentos y las navegaciones interrumpidas?

Preguntas de aclaración para hacer primero

Confirme si la navegación es siempre del mismo origen, si hay iframes involucrados, si se necesita movimiento de elementos compartidos y si ya existe un enrutador del lado del cliente. Aclare los navegadores de destino, los límites de duración, si los desvanecimientos simples son suficientes y qué debe hacer el producto cuando los usuarios desactivan el movimiento. Las transiciones entre documentos requieren que ambos documentos participantes opten por habilitarlas y que el navegador admita la característica; no son un mecanismo de navegación entre orígenes distintos.

Un marco de respuesta de 30 segundos

Mantendría los enlaces nativos y la navegación del servidor como línea base, y luego añadiría las transiciones de forma progresiva. Para una actualización dentro de la página, detectaría la presencia de startViewTransition y envolvería la actualización del DOM; para una navegación de varias páginas del mismo origen, habilitaría @view-transition en ambos documentos. Si una actualización falla, la página debe seguir siendo utilizable y el error debe ser manejado por la interfaz de usuario existente. El movimiento pertenece únicamente a los pseudoelementos de transición, respeta las preferencias de movimiento reducido y nunca asume la semántica de foco, desplazamiento o historial. Probaría navegadores no compatibles, alternativas de reserva, atrás/adelante, redes lentas y navegación interrumpida.

Análisis detallado paso a paso

1. Construir una línea base sin animaciones. Los enlaces, envíos de formularios, respuestas del servidor y páginas de error deben funcionar de forma independiente; no intercepte cada navegación para imitar una animación.
2. Manejar actualizaciones en el mismo documento. Para filtrado o cambios de estado local, detecte document.startViewTransition. Ejecute la misma función de actualización directamente cuando no sea compatible. Si la retrollamada falla, muestre el estado de error existente.
3. Manejar la navegación entre documentos. Agregue @view-transition { navigation: auto; } a las páginas del mismo origen para que el navegador cree la transición durante la navegación; no llame a startViewTransition. La falta de habilitación o compatibilidad recurre a la navegación normal.
4. Delimitar el alcance visual. Asigne view-transition-name únicamente a elementos que tengan una correspondencia estable. Use ::view-transition-old y ::view-transition-new para un desvanecimiento corto e interrumpible.
5. Proteger la accesibilidad. Desactive o acorte el movimiento bajo @media (prefers-reduced-motion: reduce). Después de la navegación, coloque el foco en el encabezado principal de la nueva página o en otro destino deliberado; las capturas instantáneas (screenshots) no deben portar estado semántico.
6. Manejar estados en tiempo de ejecución. Atrás, adelante, recargar, fallas de red, clics repetidos y abandonar la página necesitan resultados normales. Una transición cambia la temporización visual, no la semántica de URL, caché, permisos o envíos.

Respuesta de muestra de alta calidad

Separaría una línea base de navegación nativa de una capa de animación opcional. Para actualizaciones en el mismo documento, cada navegador llama a una función update; los navegadores compatibles invocan document.startViewTransition(update), mientras que otros llaman a update directamente. Para la navegación de varias páginas renderizadas en el servidor, las páginas del mismo origen incluyen @view-transition { navigation: auto; }; los enlaces siguen siendo reales y no se asume compatibilidad entre distintos orígenes.

La capa de animación solo proporciona continuidad visual. Valores estables de view-transition-name identifican elementos coincidentes, un desvanecimiento corto es el valor predeterminado y las preferencias de movimiento reducido lo desactivan. El nuevo documento sigue manejando el foco, el desplazamiento y los errores a través de su respuesta normal. Las pruebas cubren falta de compatibilidad, errores de retrollamada, atrás/adelante, clics repetidos, CPU lenta, red lenta, cambio de pestañas y movimiento reducido. Las referencias principales son la documentación de MDN para la View Transition API y startViewTransition, además de la guía de transiciones entre documentos de Chrome for Developers.

Errores comunes

• Llamar a startViewTransition para una navegación entre documentos; este es para actualizaciones en el mismo documento, mientras que la navegación junto con la habilitación por CSS inicia el caso entre documentos.
• Bloquear cada enlace con scripts, degradando el uso del teclado, enlaces copiados, navegación hacia atrás y acceso sin scripts.
• Asumir compatibilidad idéntica entre navegadores o iframes sin detección de características y alternativa nativa.
• Asignar nombres duplicados a muchos elementos o hacer que la animación sea lo suficientemente larga como para causar conflictos de instantáneas y desorientación.
• Probar solo clics hacia adelante e ignorar respuestas fallidas, atrás/adelante, movimiento reducido y transiciones interrumpidas.

Preguntas de seguimiento y respuestas

¿Qué pasa si la retrollamada de actualización en el mismo documento falla?

Mantenga la actualización del DOM y el estado de error como funciones ejecutables de forma independiente. Capturar una excepción de ViewTransition sirve para registrar y estabilizar el estado visual; el error de negocio sigue utilizando la interfaz de usuario existente, y una excepción de animación no debe bloquear la actualización de datos.

¿Cómo demuestra que las transiciones entre documentos no cambiaron la semántica de navegación?

En navegadores compatibles y no compatibles, verifique la URL, la pila del historial, la recarga, el ingreso por enlace copiado, el funcionamiento del teclado, el destino del foco y la página de error del servidor. Con las transiciones CSS deshabilitadas, el resultado de la página debe ser idéntico.

¿Cuándo se debe evitar el movimiento de elementos compartidos?

Use un desvanecimiento simple o ningún movimiento cuando la identidad sea inestable, las listas se reordenen con frecuencia, el contenido tenga un movimiento intenso o los usuarios necesiten una ubicación inmediata del estado. Conserve el comportamiento nativo cuando la ganancia visual no justifique los costos de foco, rendimiento y comprensión.