How Can I Transition Between Two Nuxt Pages, While First Waiting On A Child Component Transition/animation To Finish?

I have a question regarding transitions. When transitioning from one page to the other, is it possible to wait for a child transition/animation (extra file, extra component) to fin

Solution 1:

First thing i would wrap your custom transition in your home.vue file something like this:

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


exportdefault {
   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")
      });
    }
  }
}

And the idea here is that you use instead of an nuxt-link an common a tag or button that just set your showChild to false, that will trigger your leave method.

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

And at the end of your leave method you set this.$router.push("/about") when your transition is finished. In theorie your logo should transition first, and when its finished your page transition should start at the end then.