[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;
}

簡単ですね。