這篇是頁面客製段落其三，主題講「Nuxt 頁面轉場效果如何調整」

回憶兩種暫態

• 正在讀取中 => 讀取效果 (Loading)
• 頁面切換中 => 轉場效果 (Transition)

接續介紹另一種暫態用的頁面元件，轉場效果 (Transition)

相較 Loading 僅全域套用，Transition 可對各頁面一一指定
若沒指定樣式時，Nuxt 預設套用 page 轉場，樣式命名如:

assets/transition.css

.page-enter-active, .page-leave-active {
  transition: opacity .5s
}
.page-enter, .page-leave-to {
  opacity: 0
}
.page-enter-to, .page-leave {
  opacity: 1
}

因為不知道什麼頁面用得到，建議全域載入喲！

nuxt.config.js

export default {
  css: ['~/assets/transition.css']
}

規則自 Vue.js transition 沿用

跳轉新頁時

1. 前半套用 .page-enter-active.page-enter
2. 中間套用 .page-enter-active
3. 結束套用 .page-enter-active.page-enter-to

反之，離開原頁以此類推

推薦深入閱讀 Vue.js Transition Classes

同樣介紹三種程度客製

1. 針對預設轉場客製
2. 依頁面客製轉場
3. 客製轉場綁 Hook