transition プロパティ
pageTransition プロパティ
Nuxt v2.7.0 では「transition」キーに代わり「pageTransition」キーが導入され、名前が 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;
}
