Nuxt 页面转换时序

Question

nuxt如何计算它redirects/switches到新页面之间的页面转换之前的时间？我知道在通过 CSS 定义过渡时它会自动完成，但是我正在为我的动画使用 GSAP。 nuxt 会自己计算时间还是需要我设置？

Answer 1

在这里你可以找到client-side navigation

的实际流量

导航触发。
在停用的组件中调用 beforeRouteLeave 守卫。
调用全局 beforeEach 守卫。
在重复使用的组件中调用 beforeRouteUpdate 守卫。
在路由配置中调用 beforeEnter。
解析异步路由组件。
在激活的组件中调用beforeRouteEnter。
调用全局 beforeResolve 守卫。
导航已确认。
调用全局 afterEach 挂钩。
DOM 已触发更新。
在带有实例化实例的 beforeRouteEnter 守卫中调用传递给 next 的回调。

以下是关于 Vue

中 CSS transitions 的各个步骤

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

这里是Nuxt global page transitions

nuxt.config.js

export default {
  buildModules: ['nuxt-gsap-module'],

  // Add global page transition
  pageTransition: {
    name: 'page',
    mode: 'out-in',
    css: false,

    beforeEnter(el) {
      this.$gsap.set(el, {
        opacity: 0
      })
    },

    enter(el, done) {
      this.$gsap.to(el, {
        opacity: 1,
        duration: 0.5,
        ease: 'power2.inOut',
        onComplete: done
      })
    },

    leave(el, done) {
      this.$gsap.to(el, {
        opacity: 0,
        duration: 0.5,
        ease: 'power2.inOut',
        onComplete: done
      })
    }
  }
}

这里没有什么特别的魔法：只是 Nuxt 使用可用于转换的钩子。

Nuxt 页面转换时序

Nuxt page transition timing

gsap

nuxt.js