Question

我有这段代码，可以很好地过渡效果。原谅它的丑陋，但它做得很好。

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

问题是js-swipe-out同时发生，所以我的动画无法正常播放。例如，您不能总是看到我拥有的100％自定义转换，尤其是在例如打开菜单时。

一篇Github文章说我可以使用中间件来延迟或暂停它，但这会延迟整个过程，而不仅仅是像我后面的js-swipe-out。

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先做beforeEnter(el)然后再做js-swipe-out的任何想法？ beforeEnter中的自定义代码完成之后？

在切换路由时，在我的自定义beforeEnter过渡之前延迟主过渡吗？

0 个答案: