Estoy intentando crear una transición de página en nuevas cargas de página con alpine js.
Mi idea es tener un div superpuesto a todo el sitio con una posición fija que puedo mostrar y ocultar con x-show. De forma predeterminada, se establece en verdadero en x-data, pero al cargar cambia a falso, con x-transition se desvanece inmediatamente. Luego, al hacer clic en cualquier etiqueta "a", se establece en verdadero (desapareciendo con la transición x) y luego se apaga nuevamente en la carga de la nueva página.
<body x-data="{ loader: true }"> <div x-show="loader" @load.window="loader = false" @keyup.escape.window="loader = false" @click.document="if($event.target.closest('a') && !event.metaKey && !event.ctrlKey) loader = true" x-transition.opacity.duration.1000ms class="w-screen h-screen fixed left-0 top-0 z-50 bg-black"> <img src="anim.gif" class="w-24 absolute right-1/2 translate-x-1/2 top-1/2 -translate-y-1/2"> </div> <div> rest of my site ... </div> </body>El efecto es un div que aparece y desaparece en el sitio al cambiar cualquier página. Pensé que esto era bastante inteligente hasta que me di cuenta de que no funciona con el botón Atrás y el botón Detener del navegador.
Problema n.º 1 Al hacer clic en el botón Atrás, el div del cargador cubre la página pero no se desvanece porque la página no se recarga, por lo que no se cambia a falso.
Problema nº 2 Al hacer clic en el botón de parada después de que el cargador haya hecho la transición, no se desvanece. @keyup.escape.window="loader = false" maneja bastante bien la detención de la carga de la página con la tecla esc, pero no puedo hacer el equivalente con el botón de parada.
Estoy pensando que podría haber una manera de decir "loader = false" después de que finalice cualquier tipo de carga en lugar de intentar apuntar al botón de parada que no parece ser posible.