from.remove() when the user does not wait for the transition to be completed (with overlap)

Hello!

I’m using Highway to make overlap transition. Everything works fine but the old page isn’t remove if the user click on a link before the end of the transition.

I didn’t use gasp (or any other transition library), I use keyframes from my CSS and run from.remove() with a setTimeout. Maybe that’s where the problem’s coming from?

//main.js
import Highway from './highway.module.js';
import Overlap from './CustomTransition.js';
(() => {
  const H = new Highway.Core({
    transitions: {
      default: Overlap
    }
  });
})();

//CustomTransition.js
import Highway from './highway.module.js';
 class Overlap extends Highway.Transition {
  in({ from, to, trigger, done }) {      
      from.style.position = 'absolute';
      to.style.animation = "overlapTest 1s";            
      let timeremove = setTimeout(() => from.remove(), 1200)      
      done();
  }
  out({ from, done }) {
    done();    
  }
}
export default Overlap;

/*style.css*/
@keyframes overlapTest {
    from{ transform: translateX(100vw); }
    to{transform: translateX(0); }    
}

I have make a demo with a transition of 1s => https://eloquent-heisenberg-124835.netlify.app/

I have also make a repo : https://github.com/Totokoutonio/Highway_Overlap

Thx for helping!

[Totokoutonio]

@ThaoD5 I have use animationend and it works well!

//CustomTransition.js
import Highway from './highway.module.js';

class Overlap extends Highway.Transition {
  in({ from, to, done }) {      
      let el = document.querySelector('body');
      el.classList.add('transitions-active');      
      to.style.animation = "overlapTest 1s";
      to.addEventListener('animationend', () => {
        from.remove();
        el.classList.remove('transitions-active');
      });
      done();
  }
  out({ from, done }) {
    done();
  }
}

export default Overlap;

/*style.css*/
@keyframes overlapTest {
    from{ transform: translateX(100vw); }    
    to{ transform: translateX(0); }    
}

body.transitions-active{
    pointer-events: none;
}

Thanks a lot, I close this issue.

[ThaoD5]

For a cleaner approach, I would advise to use an event like 'transitionend on the element that has your transition animation, that way you’re not playing with settimeout, but this is a very personal approach. 😃

Glad that solution worked for you !