'classlist.remove when going back in history

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

Solution 1:^[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);
}

Solution 2:^[2]

Attribute declarations such as that are an extension to the C language supported by some compilers. That particular one marks the exit() function with the very unusual characteristic that it never returns to its caller.

Such marking is not needed, but it assists the compilers for which it is intended to optimize more effectively and / or to emit more accurate diagnostics.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	towelie
Solution 2	John Bollinger

'classlist.remove when going back in history

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]