Delay the main transition before my custom beforeEnter transition whilst switching routes?

I have this code which does a nice transition effect. Forgive its ugliness but it does the job wonderfully.

mixin:

export default {
  transition: {
    name: "js-swipe-out",
    mode: "out-in",
    beforeEnter(el) {
      var loader = document.querySelector(".o-loader");
      var wrap = document.querySelector(".o-wrapper");

      setTimeout(() => {
        loader.classList.add("is-loading");
        setTimeout(() => {
          wrap.classList.remove("is-active");
          setTimeout(() => {
            loader.classList.add("is-loaded");
            setTimeout(() => {
              loader.classList.remove("is-loaded");
              loader.classList.remove("is-loading");
              setTimeout(() => {
                // anim in new page elements
                wrap.classList.add("is-active");
              }, 0);
            }, 1099);
          }, 500);
        }, 1099);
      }, 0);
    }
  }
};

CSS

.js-swipe-out-enter-active,
.js-swipe-out-leave-active {
  transition: 1.2s all ease;
}

.js-swipe-out-enter,
.js-swipe-out-leave-active {
  opacity: 0;
  transform: translateY(-33.333vh);
}

The problem is that js-swipe-out happens at the same time so my animation doesn't work as I would like. For example, you can't always see 100% of the custom transition I have, especially when the menu is open for example.

A Github article said I can use middleware to delay it or pause it, but this delays the whole thing, not just js-swipe-out as I am after.

export default ({ isServer }) => {
  if (isServer) return
  // Return a promise to tell nuxt.js to wait for the end of it
  return new Promise((resolve) => {
    setTimeout(resolve, 1000);
  })
}

Any ideas of how I can tell Nuxt to do beforeEnter(el) first and then do js-swipe-out after? Once my custom code in beforeEnter has completed?