过渡效果
Nuxt 使用 transition 组件 来实现页面切换时的过渡/动画效果。
要为特定路由设置自定义过渡效果，请在页面组件中添加 transition 键。
pages/index.vue
export default {
// 可以指定字符串
transition: ''
// 或者对象
transition: {}
// 或者函数
transition (to, from) {}
}
字符串
当 transition 键设置为字符串时，将作为 transition.name 使用。
pages/index.vue
export default {
transition: 'home'
}
如上配置后，Nuxt 会将组件设置为：
pages/index.vue
<transition name="home"></transition>
这是自动完成的，因此无需在页面或布局中添加
<transition> 组件。这样，只需为过渡效果创建新的类即可。
pages/index.vue
<style>
.home-enter-active, .home-leave-active { transition: opacity .5s; }
.home-enter, .home-leave-active { opacity: 0; }
</style>
对象
当 transition 键设置为对象时：
pages/index.vue
export default {
transition: {
name: 'home',
mode: 'out-in'
}
}
如上配置后，Nuxt 会将组件设置为：
pages/index.vue
<transition name="home" mode="out-in"></transition>
transition 对象可以拥有 name、mode、css、duration 等许多属性。详情请参阅 Vue 的文档。
也可以在页面的 transition 属性中定义函数。详情请参阅 Vue 文档中的 JavaScript 钩子 。
export default {
transition: {
afterLeave(el) {
console.log('afterLeave', el)
}
}
}
过渡模式
默认的过渡模式与 Vue.js 不同。
transition 模式默认设置为 out-in。如果想同时执行 leaving 和 entering 过渡，需要将 mode 属性设置为空字符串（mode: ''）。pages/index.vue
export default {
transition: {
name: 'home',
mode: ''
}
}
函数
当 transition 键设置为函数时：
pages/index.vue
export default {
transition(to, from) {
if (!from) {
return 'slide-left'
}
return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
}
}
过渡效果在每次页面切换时按如下方式应用：
/ 到 /posts => slide-left，/posts 到 /posts?page=3 => slide-left，/posts?page=3 到 /posts?page=2 => slide-right。
全局配置
Nuxt 默认的过渡效果名称为 "page"。要为应用中所有页面添加淡入淡出过渡效果，需要一个应用于所有路由的 CSS 文件。
在 assets/main.css 中编写全局 CSS：
assets/main.css
.page-enter-active,
.page-leave-active {
transition: opacity 0.5s;
}
.page-enter,
.page-leave-to {
opacity: 0;
}
在 nuxt.config.js 文件的 css 数组中添加 CSS 文件路径：
nuxt.config.js
export default {
css: ['~/assets/main.css']
}
构成配置
layoutTransition 属性
用于指定布局过渡效果的默认配置。
默认配置如下：
{
name: 'layout',
mode: 'out-in'
}
assets/main.css
.layout-enter-active,
.layout-leave-active {
transition: opacity 0.5s;
}
.layout-enter,
.layout-leave-active {
opacity: 0;
}
如果想修改默认配置，请在 nuxt.config.js 文件中如下编写：
nuxt.config.js
export default {
layoutTransition: 'my-layouts'
// or
layoutTransition: {
name: 'my-layouts',
mode: 'out-in'
}
}
assets/main.css
.my-layouts-enter-active,
.my-layouts-leave-active {
transition: opacity 0.5s;
}
.my-layouts-enter,
.my-layouts-leave-active {
opacity: 0;
}
pageTransition 属性
默认配置如下：
{
name: 'page',
mode: 'out-in'
}
如果想修改默认配置，请在 nuxt.config.js 文件中如下编写：
nuxt.config.js
export default {
pageTransition: 'my-page'
// 或者
pageTransition: {
name: 'my-page',
mode: 'out-in',
beforeEnter (el) {
console.log('Before enter...');
}
}
}
如果修改了页面过渡效果的名称，也需要同步修改 CSS 的类名。
assets/main.css
.my-page-enter-active,
.my-page-leave-active {
transition: opacity 0.5s;
}
.my-page-enter,
.my-page-leave-to {
opacity: 0;
}
Edit this page on GitHub
Updated at Tue, Apr 14, 2026