如何在两个 nuxt 页面之间转换，同时首先等待子组件转换/动画完成? [英] How can I transition between two nuxt pages, while first waiting on a child component transition/animation to finish?
问题描述
我有一个关于转换的问题.从一个页面过渡到另一个页面时，是否可以等待子过渡/动画(额外文件、额外组件)完成然后过渡到下一页?
示例:
1) 主页(页面组件)
a) 徽标(Vue 组件)
2) 关于(页面组件)
当我点击主页上的关于"时，我首先想为徽标组件设置动画，然后淡出整个主页，然后路由到关于"页面.
这里是相关代码:
Index.vue:
<div class="home" style="opacity: 0"><标志 v-show="showChild"/><nuxt-link to="/about">关于</nuxt-link><p>主页</p><脚本>从~/components/Logo.vue"导入Logo；从gsap"导入 { TweenMax, CSSPlugin };导出默认{组件: {商标},数据() {返回 {showChild: 真};},过渡: {输入(埃尔，完成){console.log("进入父母家");this.showChild = true;TweenLite.to(el, 1, {不透明度:1，onComplete:完成});},离开(埃尔，完成){this.showChild = false;TweenLite.to(el, 1, {不透明度:0，onComplete:完成});console.log("离开父母家");console.log("子可见:" + this.showChild);},出现:真实，css: 假}};
Logo.vue
<transition @enter="enter" @leave="leave" mode="out-in" :css="false"><div style="display: block; width: 200px; height: 200px;"><脚本>导出默认{道具: {显示孩子:{类型:布尔型，默认值:真}},方法: {输入(埃尔，完成){console.log("进入儿童之家");TweenLite.fromTo(el, 1, { x: -100 }, { x: 0, onComplete: done });},离开(埃尔，完成){console.log("让孩子回家");TweenLite.to(el, 1, {x: -100,onComplete:完成});}}};
关于.vue
<div class="about" style="opacity: 0"><nuxt-link to="/">首页</nuxt-link><p>关于</p><脚本>导出默认{过渡: {输入(埃尔，完成){console.log("输入家长关于");TweenLite.to(el, 1, {不透明度:1，onComplete:完成});},离开(埃尔，完成){console.log("离开父母");TweenLite.to(el, 1, {不透明度:0，onComplete:完成});},出现:真实，css: 假}};
我还创建了一个沙箱.
https://codesandbox.io/s/codesandbox-nuxt-psks0
不幸的是，我遇到了两个问题:
1) 子组件(徽标)的离开转换现在没有开始.
2) 我想先完成子组件(徽标)转换，然后完成主页转换，然后路由到关于页面.这可能吗?
非常感谢您的帮助.
最好的问候克里斯
首先，我会将您的自定义过渡包装在您的 home.vue 文件中，如下所示:
<仅限客户><标志 v-if="showChild"/></仅限客户端> 导出默认{数据() {返回 {showChild: 真};},方法: {输入(埃尔，完成){console.log("进入儿童之家");TweenLite.fromTo(el, 1, { x: -100 }, { x: 0, onComplete: done });},离开(埃尔，完成){console.log("让孩子回家");TweenLite.to(el, 1, {x: -100,onComplete: this.$router.push("/about")});}}}这里的想法是你使用一个普通的 a 标签或 button 而不是 nuxt-link 来设置你的 showChild 为 false，这将触发您的 leave 方法.
在你的 leave 方法结束时，你设置 this.$router.push("/about") 当你的转换完成.从理论上讲，您的徽标应该首先过渡，当它完成时，您的页面过渡应该在最后开始.
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 finish and then transition to the next page?
Example:
1) Home (Page Component)
a) Logo (Vue Component)
2) About (Page Component)
When I click on the About one the homepage, I first would like to animate the Logo component, then fade out the whole homepage and then route to the About page.
Here the relevant code:
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>
I have also created a sandbox.
https://codesandbox.io/s/codesandbox-nuxt-psks0
Unfortunately I am stuck with two problems:
1) The leave transition of the child component (Logo) isn't starting right now.
2) I would like to first finish the Child Component (Logo) transition and then finish the home page transition and then route to the about page. Is that even possible?
Thank you very much for your help.
Best regards Chris
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>
<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")
});
}
}
}
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.
这篇关于如何在两个 nuxt 页面之间转换，同时首先等待子组件转换/动画完成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
