1. 全站的統一轉場效果

這就像為您的簡報設定了「所有投影片都使用淡出淡入效果」。我們只需要兩步就能完成。

第一步：在 nuxt.config.ts 中啟用

首先，我們在設定檔中告訴 Nuxt 我們要啟用頁面轉場，並給它一個名字，例如 page。

nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    // 啟用頁面轉場，並命名為 'page'
    pageTransition: { name: 'page', mode: 'out-in' }
  }
})

mode: 'out-in' 的意思是「讓舊頁面先跑完離開的動畫，新頁面再進來」，能避免畫面重疊。

第二步：用 CSS 編排動畫

接著，我們需要在全域的樣式中（例如 app.vue 或 assets/css/main.css），定義名為 page 的動畫要怎麼動。

Vue 的轉場有 6 個 class 可以用，但您通常只需要專注在其中 4 個：

CSS 動畫設定

/* 進入動畫的過程 */
.page-enter-active,
/* 離開動畫的過程 */
.page-leave-active {
  transition: all 0.4s; /* 動畫持續 0.4 秒 */
}

/* 進入動畫的起點 (從透明、模糊開始) */
.page-enter-from,
/* 離開動畫的終點 (到透明、模糊結束) */
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}

現在，在您的頁面之間導航看看，是不是出現了漂亮的淡入淡出效果？

2. 特定頁面的專屬動畫

雖然大部分頁面都用淡出淡入，但您可能希望某個特別的頁面，例如「關於我」，登場時能有一個華麗的旋轉效果。

您只需要在那個頁面中，使用 definePageMeta 來覆寫轉場設定。

頁面中設定專屬轉場

<script setup>
definePageMeta({
  // 把這個頁面的轉場動畫改名為 'rotate'
  pageTransition: {
    name: 'rotate'
  }
})
</script>

然後，一樣在全域樣式中，為 rotate 這個動畫編排動作：

旋轉動畫 CSS

.rotate-enter-active,
.rotate-leave-active {
  transition: all 0.4s;
}

.rotate-enter-from,
.rotate-leave-to {
  opacity: 0;
  transform: rotate3d(1, 1, 1, 15deg); /* 旋轉效果 */
}

今日總結

今天我們學會了如何為網站的頁面切換加入動畫，無論是全站統一的，還是特定頁面專屬的。

在 nuxt.config.ts 設定全域轉場。

在頁面中用 definePageMeta 設定專屬轉場。

用對應的 CSS class (-enter-active, -leave-to 等) 來定義動畫細節。

預告：頁面的轉場我們搞定了，但如果切換頁面時，連「版型 (Layout)」都換了，那動畫該怎麼辦？還有，瀏覽器最近推出了一個更厲害的原生轉場技術，Nuxt 也能用嗎？明天，我們就來探索這些進階的轉場技巧！