Nuxt3【过渡】2024最新版 （含页面过渡、布局过渡、全局过渡、局部过渡、动态过渡、禁用过渡等）

全局布局过渡 layoutTransition

nuxt.config.ts 中

export default defineNuxtConfig({
  app: {
    layoutTransition: { name: 'layout', mode: 'out-in' }
  },
})

app.vue 中需添加样式

.layout-enter-active,
.layout-leave-active {
  transition: all 0.4s;
}
.layout-enter-from,
.layout-leave-to {
  filter: grayscale(1);
}

全局页面过渡 pageTransition

nuxt.config.ts 中

export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'page', mode: 'out-in' }
  },
})

app.vue 中需添加样式

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}
</style>

指定页面的过渡 definePageMeta

布局过渡

definePageMeta({
  layout: 'orange',
  layoutTransition: {
    name: 'slide-in'
  }
})

页面过渡

<script setup lang="ts">
definePageMeta({
  pageTransition: {
    name: 'rotate'
  }
})
</script>

app.vue 中需添加样式

.rotate-enter-active,
.rotate-leave-active {
  transition: all 0.4s;
}
.rotate-enter-from,
.rotate-leave-to {
  opacity: 0;
  transform: rotate3d(1, 1, 1, 15deg);
}

可以使用JavaScript钩子为Nuxt页面创建高度动态和自定义的过渡效果，非常适合使用GSAP等JavaScript动画库。

<script setup lang="ts">
definePageMeta({
  pageTransition: {
    name: 'custom-flip',
    mode: 'out-in',
    onBeforeEnter: (el) => {
      console.log('进入之前...')
    },
    onEnter: (el, done) => {},
    onAfterEnter: (el) => {}
  }
})
</script>

NuxtPage 上添加过渡

此种页面过渡效果无法通过在单个页面上使用definePageMeta来覆盖

<template>
  <div>
    <NuxtLayout>
      <NuxtPage :transition="{
        name: 'bounce',
        mode: 'out-in'
      }" />
    </NuxtLayout>
  </div>
</template>

动态过渡

利用内联 middleware 将不同的过渡名称分配给 to.meta.pageTransition ，详见 官网

禁用过渡

全局禁用（nuxt.config.ts 中）

  app: {
    pageTransition: false,
    layoutTransition: false
  }

指定页面禁用

definePageMeta({
  pageTransition: false,
  layoutTransition: false
})