Как я могу перейти между двумя пустыми страницами, ожидая завершения перехода или анимации дочернего компонента? - PullRequest
Новая
       33

Как я могу перейти между двумя пустыми страницами, ожидая завершения перехода или анимации дочернего компонента?

2 голосов
/ 31 октября 2019

У меня вопрос по поводу переходов. При переходе с одной страницы на другую возможно ли дождаться завершения дочернего перехода / анимации (дополнительный файл, дополнительный компонент) и затем перейти на следующую страницу?

Пример:

1) Главная (Компонент страницы)

a) Логотип (Компонент Vue)

2) О программе (Компонент страницы)

Когда я нажимаю на О домашней странице О,Сначала я хотел бы анимировать компонент Logo, затем исчезнуть всю домашнюю страницу и затем перейти к странице About.

Здесь соответствующий код:

Index.vue: 

<template>
  <div class="home" style="opacity: 0">
    <Logo v-show="showChild"/>
    <nuxt-link to="/about">About</nuxt-link>
    <p>Homepage</p>
  </div>
</template>

<script>
import Logo from "~/components/Logo.vue";
import { TweenMax, CSSPlugin } from "gsap";

export default {
  components: {
    Logo
  },
  data() {
    return {
      showChild: true
    };
  },
  transition: {
    enter(el, done) {
      console.log("Enter Parent Home");
      this.showChild = true;
      TweenLite.to(el, 1, {
        opacity: 1,
        onComplete: done
      });
    },
    leave(el, done) {
      this.showChild = false;
      TweenLite.to(el, 1, {
        opacity: 0,
        onComplete: done
      });
      console.log("Leave Parent Home");
      console.log("Child Visible: " + this.showChild);
    },
    appear: true,
    css: false
  }
};
</script>

Logo.vue 

<template>
  <transition @enter="enter" @leave="leave" mode="out-in" :css="false">
    <div style="display: block; width: 200px; height: 200px;">
      <img
        style="objec-fit: cover; width: 100%; height: 100%"
        src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1334&q=80"
      >
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    showChild: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    enter(el, done) {
      console.log("Enter Child Home");
      TweenLite.fromTo(el, 1, { x: -100 }, { x: 0, onComplete: done });
    },
    leave(el, done) {
      console.log("Leave Child Home");
      TweenLite.to(el, 1, {
        x: -100,
        onComplete: done
      });
    }
  }
};
</script>

About.vue 

<template>
  <div class="about" style="opacity: 0">
    <nuxt-link to="/">Home</nuxt-link>
    <p>About</p>
  </div>
</template>

<script>
export default {
  transition: {
    enter(el, done) {
      console.log("Enter Parent About");
      TweenLite.to(el, 1, {
        opacity: 1,
        onComplete: done
      });
    },
    leave(el, done) {
      console.log("Leave Parent About");
      TweenLite.to(el, 1, {
        opacity: 0,
        onComplete: done
      });
    },
    appear: true,
    css: false
  }
};
</script>

Я также создалпесочница.

https://codesandbox.io/s/codesandbox-nuxt-psks0

К сожалению, я застрял с двумя проблемами:

1) Переход из отпуска дочернего компонента (логотип) не запускается прямо сейчас.

2) Я хотел бы сначала завершить переход дочернего компонента (логотипа), а затем завершить переход домашней страницы и затем перейти ко странице. Это вообще возможно?

Большое спасибо за помощь.

С уважением, Крис

1 Ответ

0 голосов
/ 31 октября 2019

Во-первых, я бы обернул ваш пользовательский переход в ваш файл home.vue примерно так: 

<transition @enter="enter" @leave="leave" mode="out-in" :css="false">
   <client-only>
      <Logo v-if="showChild"/>
   </client-only>
</transition>


export default {
   data() {
      return {
         showChild: true
      };
   },
   methods: {
      enter(el, done) {
         console.log("Enter Child Home");
         TweenLite.fromTo(el, 1, { x: -100 }, { x: 0, onComplete: done });
      },
      leave(el, done) {
         console.log("Leave Child Home");
         TweenLite.to(el, 1, {
         x: -100,
         onComplete: this.$router.push("/about")
      });
    }
  }
}

И идея здесь в том, что вы используете вместо nuxt-link общего тега aили button, который просто устанавливает ваше showChild в false, что вызовет ваш метод отпуска. 

<button @click="showChild = false" />

И в конце вашего метода отпуска вы установите this.$router.push("/about"), когда ваш переход будет завершен. В теории ваш логотип должен сначала перейти, а когда он закончится, ваш переход страницы должен начаться в конце.

...