Configura los parámetros de la transición para analizar la trayectoria temporal y simular el cambio entre estados de la interfaz.
En el desarrollo web moderno, crear transiciones fluidas entre vistas solía requerir complejas estructuras de código JavaScript o librerías pesadas. Con la llegada de la CSS View Transitions API, los navegadores ofrecen una forma nativa, eficiente y declarativa de animar elementos durante cambios de estado o navegación.
Hemos diseñado este simulador para facilitar el proceso de depuración e inspección visual de las curvas de animación antes de aplicarlas en producción. Entre sus funcionalidades destacan:
::view-transition-old y ::view-transition-new.Es una API nativa de los navegadores web que permite crear animaciones suaves y fluidas entre diferentes estados de la DOM o cambios de página sin necesidad de librerías JavaScript pesadas.
Permite ajustar la duración, la curva de aceleración (easing) y los efectos de transición (fade, slide, zoom) para previsualizar la animación e inspeccionar la curva de rendimiento en el gráfico.
Actualmente está soportada principalmente en navegadores basados en Chromium (Chrome, Edge, Opera) y en proceso de adopción en Firefox y Safari. Este simulador permite probar la lógica de transición de forma agnóstica.