我如何在两个 nuxt 页面之间转换，同时首先等待子组件 transition/animation 完成？

Question

我有一个关于转换的问题。从一页过渡到另一页时，是否可以等待子 transition/animation（额外文件，额外组件）完成然后过渡到下一页？

示例：

1) 主页（页面组件）

a) 徽标（Vue 组件）

2) 关于（页面组件）

当我点击主页上的“关于”时，我首先要为 Logo 组件设置动画，然后淡出整个主页，然后路由到“关于”页面。

这里是相关代码：

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) 子组件 (Logo) 的离开过渡现在没有开始。

2) 我想先完成子组件（徽标）转换，然后完成主页转换，然后路由到关于页面。这可能吗？

非常感谢您的帮助。

此致克里斯

Answer 1

首先，我会将您的自定义转换包装在您的 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")
      });
    }
  }
}

这里的想法是，您使用普通的 a 标签或 button 代替 nuxt-link，只需将 showChild 设置为 false，这将触发你的请假方式。

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

并且在离开方法结束时设置 this.$router.push("/about") 过渡完成。从理论上讲，您的徽标应该首先过渡，当它完成后，您的页面过渡应该在最后开始。

我如何在两个 nuxt 页面之间转换，同时首先等待子组件 transition/animation 完成？

How can I transition between two nuxt pages, while first waiting on a child component transition/animation to finish?

javascript

transition

vue.js

nuxt.js