全局布局过渡 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
})