Tengo una transición de una página a otra usando barba.js, después de visitar la página siguiente, si presiona el botón Atrás, no vuelve a la primera página. La URL se actualiza rápidamente a la primera, luego regresa a la segunda URL y luego simplemente actualiza la segunda página.
Después de uno (o más) clics en el botón Atrás, vuelve a la primera página.
const mainOverlay = document.querySelector("#main-overlay"); if (history.scrollRestoration) { history.scrollRestoration = "manual"; } barba.init({ transitions: [ { name: "home", leave(data) { // Move target element const target = data.trigger.closest(".transition-target"); if (target) { const yDistance = target.getBoundingClientRect().top; var tl = gsap.timeline(); tl.to(target, { top: -(yDistance - 31) + "px", left: "0", width: "100%", zIndex: 100, duration: 0.9, ease: "expo.out", }); return tl.play(); } }, enter(data) { window.scrollTo(0, 0); const newTarget = data.next.container.querySelector(".transition-target"); var tl = gsap.timeline(); tl.to(window, { scrollTo: { y: 0 }, duration: 0 }) .to(newTarget, { zIndex: 5, duration: 0, }); }, }, ], });El comportamiento esperado es hacer clic en el botón Atrás, simplemente regresa a la primera página. No se espera ninguna transición durante eso.
HTML si es necesario:
<body> <div data-barba="wrapper"> <div class="relative" data-barba="container" data-barba-namespace="home"> <div id="main-overlay" class="fixed w-full h-full z-40 bg-white hidden opacity-0"></div> ... </div> </div> </body>