API: transition 属性配置
优质
小牛编辑
125浏览
2023-12-01
- Type:
String
或Object
用于设置页面切换过渡效果的默认属性值。
默认值:
{
name: 'page',
mode: 'out-in'
}
例如 (nuxt.config.js
):
module.exports = {
transition: 'page'
// or
transition: {
name: 'page',
mode: 'out-in',
beforeEnter (el) {
console.log('Before enter...');
}
}
}
transition
用于设置页面切换过渡效果的默认属性值。想了解当 transition
的值为对象类型时有哪些可用的属性,请参考 页面过渡效果配置。
layoutTransition 属性
- 类型:
String
或Object
用于设置布局过渡的默认属性。配置与
layout
相同
默认:
{
name: 'layout',
mode: 'out-in'
}
例如 (nuxt.config.js
):
export default {
layoutTransition: 'layout'
// or
transition: {
name: 'layout',
mode: 'out-in'
}
}
全局配置示例 css
:
.layout-enter-active, .layout-leave-active {
transition: opacity .5s
}
.layout-enter, .layout-leave-active {
opacity: 0
}