如何在Nuxt 3中使用JavaScript钩子实现布局过渡（非CSS）

在 Nuxt 3 中，布局过渡的 JavaScript 钩子写法和页面过渡逻辑完全一致，仅需将页面过渡配置的pageTransition替换为layoutTransition即可。以下是具体实现方式：

一、单个页面的布局过渡配置 #

直接在目标页面的definePageMeta中定义layoutTransition，结合 GSAP 编写过渡动画：

<template>
  <div class="page-container">
    <!-- 页面内容 -->
  </div>
</template>

<script setup lang="ts">
import gsap from 'gsap'

definePageMeta({
  // 可选：指定当前页面使用的布局（若全局有默认布局可省略）
  layout: 'default',
  layoutTransition: {
    name: 'custom-layout-flip',
    mode: 'out-in',
    // 布局进入前的钩子：初始化元素状态
    onBeforeEnter: (el) => {
      gsap.set(el, { opacity: 0, y: 30 })
    },
    // 布局进入钩子：执行入场动画，必须调用done标记过渡完成
    onEnter: (el, done) => {
      gsap.to(el, {
        opacity: 1,
        y: 0,
        duration: 0.7,
        ease: 'power2.out',
        onComplete: done
      })
    },
    onAfterEnter: (el) => {
      console.log('布局入场动画执行完毕')
    },
    // 布局离开前的钩子：初始化离开前的元素状态
    onBeforeLeave: (el) => {
      gsap.set(el, { opacity: 1 })
    },
    // 布局离开钩子：执行离场动画，必须调用done标记过渡完成
    onLeave: (el, done) => {
      gsap.to(el, {
        opacity: 0,
        y: -30,
        duration: 0.5,
        ease: 'power2.in',
        onComplete: done
      })
    },
    onAfterLeave: (el) => {
      console.log('布局离场动画执行完毕')
    }
  }
})
</script>

二、全局布局过渡配置 #

如果需要所有页面共用同一套布局过渡逻辑，可以在nuxt.config.ts中全局配置：

import gsap from 'gsap'

export default defineNuxtConfig({
  app: {
    layoutTransition: {
      name: 'global-layout-transition',
      mode: 'out-in',
      onBeforeEnter: (el) => {
        gsap.set(el, { opacity: 0, scale: 0.9 })
      },
      onEnter: (el, done) => {
        gsap.to(el, {
          opacity: 1,
          scale: 1,
          duration: 0.6,
          ease: 'sine.out',
          onComplete: done
        })
      },
      // 其他钩子函数可参照单个页面配置补充
    }
  }
})

三、关键注意事项 #

• 所有异步动画钩子（onEnter、onLeave）必须调用done函数，否则 Nuxt 会判定过渡未完成，阻塞后续页面逻辑。
• 确保已安装 GSAP：执行npm install gsap或yarn add gsap完成依赖安装。
• 若需实现 FLIP 动画（元素位置/尺寸平滑过渡），可使用 GSAP 的 Flip 插件，需先注册插件：

  import { Flip } from 'gsap/Flip'
  gsap.registerPlugin(Flip)
  

  之后即可在钩子中使用 Flip API：

  onEnter: (el, done) => {
    const flipState = Flip.getState('.target-layout-element')
    // 此处可修改元素的位置、尺寸等状态
    Flip.from(flipState, {
      duration: 0.8,
      ease: 'power3.inOut',
      onComplete: done
    })
  }
  

内容的提问来源于stack exchange，提问作者anywhereseason