回到历史时的classlist.remove

Question

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);
    });
} 

Answer 1

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);
}