Nuxt页面转换时序

Question

nuxt如何计算在页面转换之间重定向/切换到新页面之前的时间？我知道它是在通过CSS定义转换时自动完成的，但是我在动画中使用GSAP。是由他们自己来决定时间呢，还是我来定时间？

Answer 1

在这里您可以找到客户端导航的实际流

1. 导航触发。
2. 在已停用的组件中调用beforeRouteLeave警卫。
3. 呼叫全球beforeEach警卫。
4. 调用重用组件中的beforeRouteUpdate警卫。
5. 在路线上给beforeEnter打电话。
6. 解析异步路由组件。
7. 在激活的组件中调用beforeRouteEnter。
8. 呼叫全球beforeResolve警卫。
9. 导航确认。
10. 呼叫全局afterEach钩子。
11. 触发DOM更新。
12. 在带有实例化实例的beforeRouteEnter警卫中传递给next的调用回调。

下面是有关Vue中的CSS跃迁的各种步骤

• 进场
• 进入活动类
• 进入类(2.1.8+)
• 请假
• 请假-活动班
• 留级(2.1.8+)

这是Nuxt全局页面转换

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
      })
    }
  }
}

这里没有什么特别的魔力:只是使用用于转换的钩子。