Seeking guidance on transitions. Is it feasible to wait for a child transition/animation to finish before transitioning from one page to another?
For instance:
1) Home (Page Component)
a) Logo (Vue Component)
2) About (Page Component)
Upon clicking on the About option on the homepage, the aim is to animate the Logo component first, fade out the entire homepage, and then proceed to the About page.
Below is 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>
A sandbox has been set up as well.
https://codesandbox.io/s/codesandbox-nuxt-psks0
Encountering two ongoing issues:
1) The leave transition of the child component (Logo) is not triggering properly at present.
2) Is it achievable to complete the Child Component (Logo) transition first, followed by the home page transition, and finally route to the about page? Any insights on this?
Your assistance is greatly appreciated.
Regards, Chris