1. 當整個場景都變了：版型轉場

什麼時候會用到它？當您切換的兩個頁面，連版型 (Layout) 都不一樣時。

例如，從有導航列和頁尾的「一般頁面」，切換到一個完全無邊框、置中的「登入頁面」。在這種整個「場景」都換掉的情況下，就需要用到版型轉場。

好消息是，它的設定方式和頁面轉場幾乎一模一樣，只是關鍵字不同。

在 nuxt.config.ts 中啟用

nuxt.config.ts

export default defineNuxtConfig({
  app: {
    // ...之前的 pageTransition 設定
    // 啟用版型轉場，並命名為 'layout'
    layoutTransition: { name: 'layout', mode: 'out-in' }
  }
})

用 CSS 編排動畫

CSS 樣式

/* 這次的 class 名稱是 layout 開頭 */
.layout-enter-active,
.layout-leave-active {
  transition: all 0.4s;
}
.layout-enter-from,
.layout-leave-to {
  filter: grayscale(1); /* 換個新效果：灰階 */
}

現在，當您在不同版型的頁面間切換時，就會看到這個灰階的轉場效果了。

2. 未來的轉場特效：View Transitions API (實驗性)

接下來這個是重頭戲！這是瀏覽器原生提供的次世代轉場技術，非常強大，而 Nuxt 已經實驗性地支援它了！

如果說昨天的 CSS 轉場是讓「整個舞台」淡出再淡入，那 View Transitions 就像電影特效，可以讓舞台上的某個演員或道具（例如一張圖片），在下一個場景中，無縫地「變形」成另一個樣子。

這可以創造出極其流暢、令人驚豔的「共享元素轉場」效果。

如何啟用這個未來科技？

非常簡單，只需要在 nuxt.config.ts 中打開實驗性開關。

nuxt.config.ts

export default defineNuxtConfig({
  experimental: {
    // 將 viewTransition 設定為 true
    viewTransition: true
  }
})

然後呢？

就這樣！啟用後，Nuxt 會盡力為你的頁面切換加上流暢的原生過渡效果。您甚至不需要寫任何 CSS，瀏覽器就會預設一個簡單的交叉淡化 (cross-fade) 效果。

注意：因為這還是實驗性功能，在某些複雜情境下可能會有些小問題，但它代表了網頁動畫的未來，絕對值得我們關注和嘗試！

今日總結

今天我們學會了處理更複雜的轉場情境！

版型轉場 (Layout Transitions)：當整個場景 (Layout) 都換掉時使用。

視圖轉場 (View Transitions)：未來的趨勢，能創造出驚人的元素「變形」效果，且設定極其簡單。

至此，我們關於「轉場動畫」的旅程就告一段落。您已經擁有了讓網站從靜態變為動態，從生硬變為流暢的各種能力！