Задержка основного перехода перед моим пользовательским переходом beforeEnter при переключении маршрутов? - PullRequest
Новая
       8

Задержка основного перехода перед моим пользовательским переходом beforeEnter при переключении маршрутов?

2 голосов
/ 17 июня 2019

У меня есть этот код, который делает хороший эффект перехода.Простите за уродство, но оно прекрасно справляется со своей работой.

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% пользовательского перехода, особенно когда меню открыто, например.

A 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 завершен?

...