Timeline

On click, the exit timer begins and everything else waits until it finished, then the entry delay timer and exit length timers start at the same time. Once the exit length timer is finished the exiting page unmounts. Once the entry delay timer is up the entry length timer starts. It is possible to overlap all timers of the entering and exit pages except for the exit delay timer which always runs on it's own before everything else.

  1. on click the exit delay timer starts
  2. then the exit function is triggered and the exit length timer starts
  3. at the same time as the exit function, the entry delay timer starts
  4. after the exit length timer is up, the exiting page unmounts
  5. after the entry delay timer is up, the entry function is triggered, entry state is injected into the page, and the entry length timer starts
  6. once all timers are finished, global entry and exit delays and lengths are reset to 0.
  7. Exit state is reset once the exiting page has unmounted
  8. Entry state will remain until the user leaves the page

A primitive diagram