Transiciones de elementos compartidos

Solo esperaba mejores transiciones de páginas nativas y Bramus comentó que Chrome está trabajando en algo. Parece que tiene un nuevo entusiasmo por ello, ya que hay un repositorio completamente nuevo y, literalmente, puedes probarlo en Chrome Canary.

¿Le gustaría agregar transiciones de navegación a su sitio sin convertirlo en un SPA? Entonces dale aprobación a este problema: https://t.co/iEv7lV5u27

– Jake Archibald (@jaffathecake) 26 de abril de 2021

El repositorio se movió aquí y me encanta el nombre. Los “elementos compartidos” son clave aquí. No es solo como deslizar hacia afuera, hacia adentro o como una estrella , es poder mover elementos individuales a nuevos lugares. Shawn señaló que el artículo de Sarah deja muy clara esta habilidad:

Escucho *mucho* de personas a las que les gustaría crear animaciones nativas en la web, así que hice un artículo y demostraciones sobre cómo lograrlas. ¡Hecho con @vuejs y @nuxt_js ! ¡No puedo esperar a ver lo que hacen todos!

artículo: https://t.co/K0Q3JtR0hD
demostración: https://t.co/kBaaGm580Q pic.twitter.com/YXy756E6rg

– Sarah Drasner (@sarah_edo) 23 de abril de 2018

Dejaré aquí el fragmento de código del archivo README actual porque es realmente genial:

function handleTransition() {  document.documentTransition.prepare({    rootTransition: "reveal-left",    duration: 300,    sharedElements: [e1, e2, e3]  }).then(() = {    doCustomThings();    document.documentTransition.start({ sharedElements: [newE1, newE2, newE3] }).then(      () = console.log("transition finished"));  });}

No es necesario tener elementos compartidos, pero puede hacerlo y, por el momento, todos deben contain: paintaplicarse a través de CSS para funcionar. Tenga en cuenta que no tiene que ocuparse de actualizar la URL ni nada, eso sucedería automáticamente (¿supongo?), ya que esto no requiere una arquitectura de aplicación de una sola página para funcionar.

Historia extraña

Mientras charlaba sobre esto, Alex Riviere me señaló que la versión anterior a Chromium Edge tenía transiciones de página (propietarias):

meta http-equiv="Page-Enter"      content="RevealTrans(Duration=0.600, Transition=6)"

¿Qué? Christian Schaefer tiene una publicación lamentando lo que perdimos cuando perdimos a Trident:

Como su nombre lo indica, dicho filtro haría que el usuario realizara una transición fluida de una página a otra durante la navegación, en lugar de que las páginas aparecieran tan abruptamente como estamos acostumbrados. Había una lista extensa de filtros de transición entre los que podía elegir haciendo referencia a ellos mediante un número:

Limpiar, limpiar, disolver aleatoriamente, dividir horizontalmente, etc. Sin embargo, increíblemente, no hay toallitas de estrellas. Y definitivamente no hay “transiciones de elementos compartidos”