Transition 属性
设置页面和布局过渡的默认属性。
pageTransition 属性
Nuxt v2.7.0 引入了 "pageTransition" 键代替 "transition" 键，名称与 layout transition 键统一。
-
类型:
String或Object
用于设置页面过渡的默认属性。
默认值：
{
name: 'page',
mode: 'out-in'
}
nuxt.config.js
export default {
pageTransition: 'page'
// 或
pageTransition: {
name: 'page',
mode: 'out-in',
beforeEnter (el) {
console.log('Before enter...');
}
}
}
nuxt.config.js 中的 transition 键用于设置页面过渡的默认属性。有关 transition 键为对象时可用键的详情，请参阅页面过渡属性 。
layoutTransition 属性
-
类型:
String或Object
用于设置布局过渡的默认属性。
name选项中指定的值配置为与layouts文件夹中layout指定的名称配合使用。
默认值：
{
name: 'layout',
mode: 'out-in'
}
nuxt.config.js
export default {
layoutTransition: 'layout'
// 或
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;
}
Edit this page on GitHub
Updated at Tue, Apr 14, 2026