Nuxt 3 过渡生命周期

Question

我正在使用 Nuxt 3 布局转换和 javascript 挂钩来创建布局之间的转换。我的转换分为两部分，一部分由

onLeave

钩子触发，第二部分由下一个布局上的

onEnter

钩子触发。我这样做是为了让用户不会在转换之前或之后看到内容发生变化。

我的问题是输入钩子在离开钩子完成之前启动。这是我在两个模板中使用的代码：

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()
    }
  },
});

这是输出控制台（无法上传图像）：

leave start
enter start
leave end
enter end

我在两个转换中都使用 GSAP

// 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

Nuxt3 中有一个页面转换的演示，它使用可组合项来检查转换是否完成：

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

这可能不是您正在寻找的具体内容，但可组合方法将是您特定情况下的最佳选择。

这是仅使用 Vue3 的相同演示：

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