<Transition>组件在页面和布局之间应用过渡效果。您可以启用页面过渡，为所有页面应用自动过渡。
export default defineNuxtConfig({
app: {
pageTransition: { name: 'page', mode: 'out-in' },
},
})
要开始在页面之间添加过渡，请将以下 CSS 添加到您的app.vue
<template>
<NuxtPage />
</template>
<style>
.page-enter-active,
.page-leave-active {
transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
opacity: 0;
filter: blur(1rem);
}
</style>
<template>
<div>
<h1>Home page</h1>
<NuxtLink to="/about">About page</NuxtLink>
</div>
</template>
<template>
<div>
<h1>About page</h1>
<NuxtLink to="/">Home page</NuxtLink>
</div>
</template>
这会在页面之间导航时产生以下结果
要为页面设置不同的过渡，请在页面的definePageMeta中设置pageTransition键
<script setup lang="ts">
definePageMeta({
pageTransition: {
name: 'rotate',
},
})
</script>
<template>
<NuxtPage />
</template>
<style>
/* ... */
.rotate-enter-active,
.rotate-leave-active {
transition: all 0.4s;
}
.rotate-enter-from,
.rotate-leave-to {
opacity: 0;
transform: rotate3d(1, 1, 1, 15deg);
}
</style>
移动到关于页面将添加 3D 旋转效果
您可以启用布局过渡，为所有布局应用自动过渡。
export default defineNuxtConfig({
app: {
layoutTransition: { name: 'layout', mode: 'out-in' },
},
})
要开始在页面和布局之间添加过渡，请将以下 CSS 添加到您的app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
<style>
.layout-enter-active,
.layout-leave-active {
transition: all 0.4s;
}
.layout-enter-from,
.layout-leave-to {
filter: grayscale(1);
}
</style>
<template>
<div>
<pre>default layout</pre>
<slot />
</div>
</template>
<style scoped>
div {
background-color: lightgreen;
}
</style>
<template>
<div>
<pre>orange layout</pre>
<slot />
</div>
</template>
<style scoped>
div {
background-color: #eebb90;
padding: 20px;
height: 100vh;
}
</style>
<template>
<div>
<h1>Home page</h1>
<NuxtLink to="/about">About page</NuxtLink>
</div>
</template>
<script setup lang="ts">
definePageMeta({
layout: 'orange',
})
</script>
<template>
<div>
<h1>About page</h1>
<NuxtLink to="/">Home page</NuxtLink>
</div>
</template>
这会在页面之间导航时产生以下结果
与pageTransition类似，您可以使用definePageMeta将自定义的layoutTransition应用于页面组件
<script setup lang="ts">
definePageMeta({
layout: 'orange',
layoutTransition: {
name: 'slide-in',
},
})
</script>
您可以使用nuxt.config全局自定义这些默认过渡名称。
pageTransition和layoutTransition键都接受TransitionProps作为 JSON 可序列化值，您可以在其中传递自定义 CSS 过渡的name、mode和其他有效的过渡属性。
export default defineNuxtConfig({
app: {
pageTransition: {
name: 'fade',
mode: 'out-in', // default
},
layoutTransition: {
name: 'slide',
mode: 'out-in', // default
},
},
})
name属性，您还必须相应地重命名 CSS 类。要覆盖全局过渡属性，请使用definePageMeta为单个 Nuxt 页面定义页面或布局过渡，并覆盖nuxt.config文件中全局定义的任何页面或布局过渡。
<script setup lang="ts">
definePageMeta({
pageTransition: {
name: 'bounce',
mode: 'out-in', // default
},
})
</script>
可以为特定路由禁用pageTransition和layoutTransition
<script setup lang="ts">
definePageMeta({
pageTransition: false,
layoutTransition: false,
})
</script>
或者在nuxt.config中全局禁用
export default defineNuxtConfig({
app: {
pageTransition: false,
layoutTransition: false,
},
})
对于高级用例，您可以使用 JavaScript 钩子为您的 Nuxt 页面创建高度动态和自定义的过渡。
这种方式为 JavaScript 动画库（例如GSAP.
<script setup lang="ts">
definePageMeta({
pageTransition: {
name: 'custom-flip',
mode: 'out-in',
onBeforeEnter: (el) => {
console.log('Before enter...')
},
onEnter: (el, done) => {},
onAfterEnter: (el) => {},
},
})
</script>
Transition组件中可用的信息。要使用条件逻辑应用动态过渡，您可以利用内联中间件为to.meta.pageTransition分配不同的过渡名称。
<script setup lang="ts">
definePageMeta({
pageTransition: {
name: 'slide-right',
mode: 'out-in',
},
middleware (to, from) {
if (to.meta.pageTransition && typeof to.meta.pageTransition !== 'boolean') {
to.meta.pageTransition.name = +to.params.id! > +from.params.id! ? 'slide-left' : 'slide-right'
}
},
})
</script>
<template>
<h1>#{{ $route.params.id }}</h1>
</template>
<style>
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
transition: all 0.2s;
}
.slide-left-enter-from {
opacity: 0;
transform: translate(50px, 0);
}
.slide-left-leave-to {
opacity: 0;
transform: translate(-50px, 0);
}
.slide-right-enter-from {
opacity: 0;
transform: translate(-50px, 0);
}
.slide-right-leave-to {
opacity: 0;
transform: translate(50px, 0);
}
</style>
<script setup lang="ts">
const route = useRoute()
const id = computed(() => Number(route.params.id || 1))
const prev = computed(() => '/' + (id.value - 1))
const next = computed(() => '/' + (id.value + 1))
</script>
<template>
<div>
<slot />
<div v-if="$route.params.id">
<NuxtLink :to="prev">⬅️</NuxtLink> |
<NuxtLink :to="next">➡️</NuxtLink>
</div>
</div>
</template>
现在，当导航到下一个 ID 时，页面将应用slide-left过渡，当导航到上一个 ID 时，将应用slide-right过渡
当在app.vue中使用<NuxtPage />时，可以通过transition属性配置过渡，以全局激活过渡。
<template>
<div>
<NuxtLayout>
<NuxtPage
:transition="{
name: 'bounce',
mode: 'out-in',
}"
/>
</NuxtLayout>
</div>
</template>
definePageMeta覆盖。Nuxt 附带了View Transitions API的实验性实现（参见MDN）。这是一种实现原生浏览器过渡的令人兴奋的新方式，它（除其他外）能够实现不同页面上不相关元素之间的过渡。
您可以在 StackBlitz 上查看演示在 StackBlitz 上.
Nuxt 集成可以通过配置文件中的experimental.viewTransition选项启用
export default defineNuxtConfig({
experimental: {
viewTransition: true,
},
})
可能的值为：false、true或'always'。
如果设置为 true，如果用户的浏览器匹配prefers-reduced-motion: reduce（推荐），Nuxt 将不应用过渡。如果设置为always，Nuxt 将始终应用过渡，并且您需要尊重用户的偏好。
默认情况下，所有页面都启用了视图过渡，但您可以设置不同的全局默认值。
export default defineNuxtConfig({
app: {
// Disable view transitions globally, and opt-in on a per page basis
viewTransition: false,
},
})
可以通过在页面的definePageMeta中设置viewTransition键来覆盖页面的默认viewTransition值
<script setup lang="ts">
definePageMeta({
viewTransition: false,
})
</script>
experimental.viewTransition选项时才有效。如果您还使用 Vue 过渡（例如pageTransition和layoutTransition（参见上文））以实现与新的 View Transitions API 相同的结果，那么如果用户的浏览器支持较新的原生 Web API，您可能希望_禁用_Vue 过渡。您可以通过创建~/middleware/disable-vue-transitions.global.ts并包含以下内容来实现此目的
export default defineNuxtRouteMiddleware((to) => {
if (import.meta.server || !document.startViewTransition) {
return
}
// Disable built-in Vue transitions
to.meta.pageTransition = false
to.meta.layoutTransition = false
})
<Suspense>解析之前的最后时刻，但在过渡期间，如果您的情况如此，您可能需要仔细考虑是否采用此功能。