I'm attempting to create a page transition on new page loads with alpine js.
My idea is to have a div overlay the whole site with position fixed which I can show and hide with x-show. By default it is set to true in x-data, but on load it switches to false, with x-transition it fades out immediately. Then, on click of any "a" tag it sets to true (fading in with x transition) and then switches to off again on the new page load.
<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>
The effect is a div fades in and out over the site on change of any page. I thought this was pretty clever until I realised that it doesn't work with the browser back button and stop button.
Problem #1 When clicking on the back button the loader div covers the page but doesn't fade out because the page doesn't reload, so it doesn't get switched to false.
Problem #2
When clicking the stop button after the loader has transitioned in it doesn't fade out.
@keyup.escape.window="loader = false" handles stopping page load with esc key quite well but I can't do the equivalent with the stop button.
I'm thinking there might be a way to say "loader = false" after any kind of loading is finished instead of trying to target the stop button which doesn't seem to be possible.