Vue.js 在切换路线时，在进入转换之前，在我的自定义之前延迟主转换？

我有这个代码，它有很好的转换效果。原谅它的丑陋，但它做得很好

混合：

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刷出

同时发生，因此我的动画无法正常工作。例如，你不能总是100%地看到我的自定义转换，尤其是当菜单打开时

一篇文章说我可以使用中间件来延迟或暂停它，但这会延迟整个过程，而不仅仅是像我所追求的那样

js刷出

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

---

我可以告诉Nuxt在进入（el）之前先执行

，然后在进入（el）

之后执行

js刷出

吗？在

beforenter

中的自定义代码完成后

你介意分享一个代码沙盒来重现你的问题吗？

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