0

I created a transition that makes the page go white when switching to another page, and it works well, but as I noticed if I use the built in 'back' button then it redirects to the previous page and then redirects back to the same site I pressed the 'back' button.

Here is the HTML: <div class="transition transition-1 is-active"></div> Css:

.transition-1 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
    background-color: white ;
    opacity: 0;
    pointer-events: none;
    transition: 0.5s ease-out;
  }
  
  .transition-1.is-active {
    pointer-events: all;
    opacity: 1;
  }

And where the problem comes from - the JS:

window.onload = (event) => {
    const anchors = document.querySelectorAll('nav a');
    const transition_el = document.querySelector('.transition');

    setTimeout(() => {
        transition_el.classList.remove('is-active');
    }, 500);



    for (let i = 0; i < anchors.length; i++) {
        const anchor = anchors[i];
        anchor.addEventListener('click', e => {
            e.preventDefault();
            let target = e.target.href;

            transition_el.classList.add('is-active');


            setInterval(() => {
                window.location.href = target;
            }, 500);
             // I think this gets stuck over and over again and it loads when you want to go back

        })
    }
   }

Is there a way from preventing it from doing this?

VLAZ
  • 26,331
  • 9
  • 49
  • 67
Bence Hargitai
  • 15
  • 4
  • No, you can't. If this was possible, it would be heavily abused by malicious websites that would prevent you from leaving. – paddotk Jul 27 '22 at 12:43
  • So I have to choose between this and having a transition between switching pages? – Bence Hargitai Jul 27 '22 at 12:58
  • consider using `document.addEventListener('DOMContentLoaded', () => {});` instead of `window.onload()`. [There is a difference](https://stackoverflow.com/a/35093997/2370483) – Machavity Jul 27 '22 at 12:59
  • Sorry, I don't understand what the transition and the navigation have to do with each other. – paddotk Jul 27 '22 at 13:05
  • I ment that I have to choose between not being able to go back or having a transition between page – Bence Hargitai Jul 27 '22 at 21:56

0 Answers0