Solo esperaba mejores transiciones de páginas nativas, y Bramus comentó que Chrome está trabajando en algo. Parece que tiene un nuevo entusiasmo por él, ya que hay un nuevo repositorio y puedes probarlo literalmente en Chrome Canary.
¿Le gustaría agregar transiciones de navegación a su sitio sin convertir su sitio en un SPA? Entonces dale a este problema un pulgar hacia arriba: https://t.co/iEv7lV5u27
—Jake Archibald (@jaffathecake) 26 de abril de 2021
El repositorio se ha movido aquí y me encanta el nombre. “Elementos compartidos” es embrague aquí. No es solo deslizar hacia afuera, deslizar hacia adentro o borrar estrellas, es poder mover elementos individuales a nuevos lugares. Shawn señaló que el artículo de Sarah deja muy clara esta habilidad:
🔥 I hear *a lot* from people who would like to create native-like animations on the web, so I made a write-up && demos on how to achieve them! Made w/ @vuejs and @nuxt_js! Can't wait to see what you all make!
📝 article: https://t.co/K0Q3JtR0hD
🚀 demo: https://t.co/kBaaGm580Q pic.twitter.com/YXy756E6rg— Sarah Drasner (@sarah_edo) April 23, 2018
Dejaré caer el fragmento de código del LÉAME actual aquí, ya que 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 tiene que tener sharedElements, pero puede, y en este momento todos necesitan contain: paint aplicado a ellos a través de CSS para trabajar. Tenga en cuenta que no tiene que lidiar con la actualización de la URL ni nada, eso sucederá automáticamente (¿supongo?) Ya que esto no requiere una arquitectura de aplicación de una sola página para funcionar.
Historia extraña
Mientras conversaba sobre esto, Alex Riviere me señaló que antes de Chromium Edge tenía transiciones de página (propietarias):
<meta http-equiv="Page-Enter"
content="RevealTrans(Duration=0.600, Transition=6)">Queaaa 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 pasara de una página a otra sin problemas durante la navegación, en lugar de que las páginas aparecieran tan abruptamente como estamos acostumbrados. Había una extensa lista de filtros de transición entre los que podía elegir haciendo referencia a ellos mediante un número:
Limpie, limpie, disuelva aleatoriamente, divida horizontalmente, etc. Sin embargo, no hay limpieza de estrellas, increíblemente. Y definitivamente no hay “transiciones de elementos compartidos”