Transitions 可以在切換網頁時加入動畫效果，如淡入、淡出、滑動或其他自定義的效果來提升使用者體驗，也可以結合其他動畫函式庫讓網頁看起來更加華麗。

使用方式

Page Transitions

頁面的切換效果。

Step 1

設定 nuxt.config.ts

• name 設定 css 時的前贅字。
• mode 動畫的模式，值可為：'default'（同'in-out'）, 'in-out', 'out-in'。
  • 'in-out'：下一頁先進來，上一頁才出去。
  • 'out-in'：上一頁先出去，下一頁才進來。

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'page', mode: 'out-in' }
  },
})

Step 2

建立頁面，page1.vue 及 page2.vue。

⚠️ 注意：

• 頁面必須是唯一的根元素，否則不會有 pageTransition 的效果
• <style> 須加上 scoped 設定為區域範圍，否則不論切換到哪個頁面都會是一樣的 style。

pages
 ┣ page1.vue
 ┗ page2.vue

pages/page1.vue 加入以下程式碼。

// pages/page1.vue
<template>
    <div class="container">
        <h1>this is page1.vue</h1>
        <NuxtLink to="page2">go to page2</NuxtLink>
    </div>
</template>

<style scoped>
.container {
    background-color: cornflowerblue;
}
</style>

pages/page2.vue 加入以下程式碼。

// pages/page2.vue
<template>
    <div class="container">
        <h1>this is page2.vue</h1>
        <NuxtLink to="page1">go to page1</NuxtLink>
    </div>
</template>

<style scoped>
.container {
    background-color: goldenrod;
}
</style>

Step 3

設定 transitions 效果。

⚠️ 注意：

• <style> 不要加 scoped，app.vue 為頁面的外層，<style> 應該為全域共用。
• page-enter-active 的 "page-" 是在 nuxt.config.ts 設定的 name。如果 name: blur 則 class name 須改為 "blur-"，沒對上就不會有效果。

// app.vue
<style>
.page-enter-active,
.page-leave-active {
  transition: all 1s;
}

.page-enter-from {
  margin-left: 50%;
}

.page-leave-to {
  margin-left: -50%
}
</style>

Step 4

檢視結果。

如果將 mode 改為 in-out 的效果。

Layout Transitions

佈局及頁面內容的切換效果。

如果同時設定了 Page Transitions 跟 Layout Transitions

• 同個 layout => 執行 Page Transitions
• 不同 layout => 執行 Layout Transitions

Step 1

建立 layout/default.vue，並加入以下程式碼。

<template>
    <div>
        <h1>default layout</h1>
        <slot />
    </div>
</template>

<style scoped>
h1 {
    color: lightcoral;
}
</style>

Step 2

設定 nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'page', mode: 'in-out' },
    layoutTransition: { name: 'layout', mode: 'out-in' }
  },
})

Step 3

修改 app.vue 為以下程式碼。

// app.vue
<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

• pageTransition 效果： 向左滑動。
• layoutTransition 效果： 灰色轉場。

// app.vue
<style>
/* page transition */
.page-enter-active,
.page-leave-active {
  transition: all 1s;
}
.page-enter-from {
  margin-left: 50%;
}
.page-leave-to {
  margin-left: -50%
}

/* layout transition */
.layout-enter-active,
.layout-leave-active {
  transition: all 0.4s;
}
.layout-enter-from,
.layout-leave-to {
  filter: grayscale(1);
}
</style>

Step 4

檢視結果，transition 效果為：pageTransition。

Step 5

切換不同 layout。
建立 layout/custom.vue，並加入以下程式碼。

<template>
    <div>
        <h1>custom layout</h1>
        <slot />
    </div>
</template>

<style scoped>
h1 {
    color: chocolate;
}
</style>

Step 6

pages/page2.vue 加入以下程式碼，設定 layout 為 custom。

<script setup>
definePageMeta({
    layout: 'custom'
})
</script>

Step 7

檢視結果，transition 效果為：layoutTransition。

關閉 Transitions 效果

頁面關閉

// pages/page2.vue
<script setup lang="ts">
definePageMeta({
  pageTransition: false,
  layoutTransition: false
})
</script>

全部關閉

// nuxt.config.ts
defineNuxtConfig({
  app: {
    pageTransition: false,
    layoutTransition: false
  }
})

🌞 Upcoming

今天簡單介紹了 Transitions 的效果，明天會介紹 State management，示範如何做狀態管理，敬請期待明天的內容！

參考資料：

Transitions