iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 13
1

這篇是頁面客製段落其三,主題講「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

上一篇
12. Nuxt 客製頁面效果 - 讀取(Loading)
下一篇
14. Nuxt 透過 asyncData 動態產生頁面內容
系列文
Nuxt - 使用 Vue.js 做 SSR 的第一哩路32

尚未有邦友留言

立即登入留言