I have implemented Nuxt 3 layout transitions using JavaScript hooks to smoothly transition between layouts. The transition consists of two parts, one triggered by the onLeave hook and the other triggered by the onEnter hook on the next layout. This setup ensures that users do not see a sudden change in content just before or after the transition.
However, I am facing an issue where the enter hook starts executing before the leave hook completes its operation. Below is the code snippet used in both my templates:
definePageMeta({
scrollToTop: false,
layout: "default",
layoutTransition: {
name: "layout-transition",
css: false,
onLeave: async (el, done) => {
console.log("leave start")
await onLeaveAnimation()
console.log("leave end")
done()
},
onEnter: async (el, done) => {
console.log("enter start")
await onEnterAnimation()
console.log("enter end")
done()
}
},
});
Additionally, here is the output from the console:
leave start
enter start
leave end
enter end
Both transitions utilize GSAP library for animation effects as shown in the following code snippet:
// Inside an asynchronous function
const timeline = gsap.timeline()
const loadingScreen: HTMLElement | null = document.getElementById("loading-screen");
const letters: NodeListOf<Element> | null = document.querySelectorAll(".text-loading-title > span");
const lettersOutAnimation = {
opacity: 0,
transform: "translateY(-100%)",
stagger: 0.05,
ease: "ease-out",
}
const positionAnimation = {
transform: "translateY(-100%)",
duration: 0.5,
ease: "ease-in-out",
}
const sizeAnimation = {
height: "0vh",
duration: 0,
}
await timeline.to(letters, lettersOutAnimation)
await timeline.to(loadingScreen, positionAnimation)
timeline.set(loadingScreen, sizeAnimation)