Todavía espero mejores transiciones de páginas nativas | Programar Plus

Sería bueno poder animar la transición entre páginas si queremos hacerlo en la web sin tener que recurrir a hacks u opciones de arquitectura completas para lograrlo. Podría imaginar una API que ejecutaría cosas, tal vez integrándose con WAAPI, antes de que se descargue la página, y otras cosas después de que se cargue la página siguiente. Esto, con enlaces de anclaje y cargas de página normales.

tenemos un onbeforeunload API, pero no estoy seguro de qué tipo de equipaje tiene. Técnicamente podemos crear transiciones de página ahora, incluso sin una arquitectura de aplicación de una sola página, pero lo que quiero son API especialmente diseñadas que nos ayuden a hacerlo de manera limpia (funciones comprensibles) y teniendo en cuenta tanto el rendimiento (trabajar tan rápido como normalmente se hace al hacer clic en los enlaces) como la accesibilidad (como el manejo del enfoque).

Si está creando una aplicación de una sola página de todos modos, tiene la libertad de animar entre vistas porque la página nunca se recarga. El peligro aquí es que puede elegir una aplicación de una sola página solo por esta capacidad, que es lo que quiero decir con tener que comprar una arquitectura de sitio solo para lograr esto. Eso se siente como una compensación desafortunada, ya que las aplicaciones de una sola página generan una tonelada de gastos generales, como problemas de herramientas y accesibilidad, que de otro modo no habrías necesitado.

Sin una aplicación de una sola página, podría usar algo como Turbo y animate.css como este. O, el nuevo estilo de transición de Adam, un clip-path() homenaje basado en la obra maestra de Daniel Edan. Tal vez si ese enfoque se combinara con instant.page, sería tan rápido como cualquier otro clic en un enlace interno.

Hay otros jugadores que intentan resolver esto, como smoothState.js y Swup. El truco es: interceptar la acción para pasar a la página siguiente, ejecutar primero la animación, luego cargar la página siguiente y animar la nueva página. Técnicamente, ralentiza un poco las cosas, pero puede hacerlo de manera bastante eficiente y el el movimiento añade suficiente distracción como para que el rendimiento percibido sea incluso mejor.

Idealmente, no tendríamos que animar toda la página, pero podríamos tener un control total para hacer transiciones más interesantes. Diablos, estaba haciendo eso hace una década con una página para un músico donde hacer clic en el sitio solo movía las cosas para que el audio siguiera reproduciéndose (y era divertido).

Este sería un gran lugar para que la plataforma web intervenga. Recuerdo que Jake impulsó esto hace años, pero no estoy seguro de si eso llegó a alguna parte. Luego tenemos portales que son… ¿de acuerdo? Esos son como si carga un iframe en la página y luego lo anima para que se apodere de toda la página (y actualice la URL). No hay muchos matices de animación posibles allí, pero ciertamente podría deslizar algunas páginas o hacerlas aparecer y desaparecer (hey, aquí hay otra: Highway), como lo hizo jQuery Mobile en la antigüedad.

(Visited 3 times, 1 visits today)