Hice una pequeña transición de página con javascript.

Cuando el usuario hace clic en un enlace, un div negro obtiene la clase "diapositiva" que activa la opacidad de la animación de 0 a 1.

Luego, activa el enlace a la página siguiente, donde un div negro se anima desde la opacidad 1 a 0. Esto funciona bien.

Pero cuando vuelvo a la historia, el div todavía tiene la clase "diapositiva", por lo que solo veo un rectángulo negro.

Cuando coloco un classList.remove("slide") en setTimeout , este problema desaparece, pero veo la página por un milisegundo cuando cambio a la otra página.

¿Alguien tiene una idea de cómo puedo solucionar este problema?

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