0

I made a small page-transition with javascript.

When the user clicks a link, a black div gets the class "slide" which triggers the animation going on opacity from 0 to 1.

Then, it triggers the link to the next page, where a black div animates from opacity 1 to 0. This works just fine.

But when I go back in history the div still has the class "slide", so that I only see a black rectangle.

When I put a classList.remove("slide") in the setTimeout this problem is gone but I see the page for a millisecond when switching to the other page.

Does anyone have an idea how I can solve this issue?

for (let i = 0; i < link.length; i++) {
    link[i].addEventListener("click", (e) => {
        e.preventDefault();
        transition.classList.add("slide");
        setTimeout(() => {
            window.location = link[i].href;
        }, 450);
    });
}
Oris Sin
  • 1,023
  • 1
  • 13
  • 33
towelie
  • 3
  • 3
  • you said:"I go back in history" did you mean the very browser back button? I don't think it can be intercepted by JS. But a turnover solution would be to check document.referrer is filled in, so you can add/remove class from classlist. – Erique Bomfim May 16 '22 at 10:25
  • Yes, I mean the browser back button. document.referrer seams like a good idea but when going back it is empty. – towelie May 16 '22 at 20:20

1 Answers1

0

The solution: performance.navigation.type as mentioned in the second answer here: How to force reloading a page when using browser back button?

if(performance.navigation.type == 2){
   location.reload(true);
}
towelie
  • 3
  • 3