Nuxt 3 transition lifecycle

Question

I am using Nuxt 3 layout transitions with javascript hooks to create a transition between my layouts. My transition is separated in two parts, one triggered by the onLeave hook and the second triggered by the onEnter hooks on the next layout. I am doing this so users don't see the content changing just before or just after the transition.

My problem is that the enter hook starts before the leave one is done. Here is the code I am using 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()
    }
  },
});

And here is the output console (can't upload an image) :

leave start
enter start
leave end
enter end

I am using GSAP inside both transitions

// in async 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)

Answer 1

There is a demo for page transitions in Nuxt3 that uses a composable to check whether or not a transition is completed:

https://stackblitz.com/edit/nuxt-starter-bthjlg

It might not be what you're looking for specifically but the composable approach would be the way to go in your particular case.

Here is the same demo using just Vue3:

https://stackblitz.com/edit/vitejs-vite-w8wtpj