[Nuxt]レイアウトの切り替えに重宝する layoutTransition プロパティ
nuxt で異なるレイアウトファイルを使ったページ間の遷移の際に <transition> コンポーネントが使えず困っていました。
同一レイアウトの遷移はフェードイン / アウトで入れ替わるのにレイアウトが異なるときはパッと切り替わってしまったり。
layoutTransition というものがちゃんと用意されていたようです。
layoutTransition プロパティ
javascript
export default {
layoutTransition: {
name: 'layout',
mode: 'out-in'
}
}
デフォルトがこうなっているので、グルーバルな CSS で .layout-enter などのスタイルを記述するだけ。
css
.layout-enter {
opacity: 0;
}
.layout-enter-to {
opacity: 1;
}
.layout-enter-active {
transition: opacity 0.4s ease-out;
}
.layout-leave {
opacity: 1;
}
.layout-leave-to {
opacity: 0;
}
.layout-leave-active {
transition: opacity 0.2s ease-out;
}
簡単ですね。
