【Day 25】轉場與返回首頁：用 Vue Transition 打造「雙向切換」功能

2026 iThome 鐵人賽

DAY 25

Modern Web

微光採集瓶：用 Vue 3 打造每日美好記錄網頁系列第 25 篇

18th鐵人賽

y0yi9ue

2026-10-09 17:55:59

43 瀏覽

分享至

昨天把整體視覺風格調整完，並解決了圖片匯出的難題後，終於可以繼續做新功能了。

既然我們有了首頁，也有了採集瓶的主畫面，那麼在兩者之間切換時，如果只是在按下按鈕後生硬的換成下一個畫面，原本營造出來的寧靜氛圍就會大打折扣。今天就來聊聊我怎麼用 Vue 的 <Transition> 打造進退場效果，以及如何在主畫面補上返回按鈕，把整個體驗串成一個完整的閉環。

一、用 Vue Transition 串起兩個頁面的切換

在專案中，我並沒有引入複雜的路由套件（Vue Router），而是單純透過一個狀態變數 showLanding（布林值）來控制目前要顯示首頁還是採集瓶主畫面。

要讓這兩個區塊切換時有平滑的動畫，使用 Vue 內建的 <Transition> 元件就是一個解法：

<Transition name="stellar" mode="out-in">
  <!-- 首頁 -->
  <div v-if="showLanding" key="landing" class="landing-page">
    <!-- 首頁步驟與標題... -->
    <button class="btn-enter" @click="showLanding = false">開始採集微光</button>
  </div>

  <!-- 採集瓶主畫面 -->
  <div v-else key="main" class="main-content">
    <!-- 主畫面的所有內容都放在這裡 -->
  </div>
</Transition>

要注意，<Transition> 一次只能包住一個根元素。如果主畫面是用 <template v-else> 把一堆並列的區塊包起來，動畫會失效，因為 <template> 本身不會產生真正的 DOM 節點。所以我把主畫面改成一個實際的 <div class="main-content">，把所有內容都放進去。

除了上面那點，還有兩個讓動畫能正常運作的關鍵：

必須加上唯一的 key：

因為這兩個畫面是寫在同一個組件裡用 v-if / v-else 切換，外層一定要給各自獨立的 key="landing" 與 key="main"，Vue 才能精準辨識這是兩個完全不同的區塊，進退場動畫才抓得到觸發時機。
mode="out-in" 避免兩個畫面同時擠在一起：

如果沒設這個屬性，新舊畫面會同時擠在畫面上重疊一下。加上 mode="out-in" 後，就能讓舊畫面先完全淡出消失，新畫面再接著浮現，轉場看起來很順暢。

二、避開切換卡頓

在寫過渡動畫的 CSS 時，我一開始想要追求更夢幻的感覺，所以嘗試在動畫中加入 filter: blur(...)，希望畫面能從模糊中漸漸清晰。

但實際跑起來卻發現：切換時畫面卡卡的、很不順暢。

這是因為模糊濾鏡非常吃瀏覽器效能，如果在切換時硬要運算模糊效果，負擔太大了。最後我決定捨棄模糊，回歸較穩定的屬性組合——透明度搭配一點點垂直位移。

/* ============ 轉場動畫 ============ */
.stellar-enter-active,
.stellar-leave-active {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.stellar-enter-from {
  opacity: 0;
  transform: translateY(12px);
}

.stellar-leave-to {
  opacity: 0;
  transform: translateY(-12px);
}

改用這段 CSS 之後，畫面切換變得很順暢，完全沒有卡頓的感覺，而且微微上升與下沉的動態也很適合這個專案主題。

三、補上雙向閉環：採集瓶內的「返回首頁」按鈕

能順利進到採集瓶之後，總不能把使用者困在裡面。雖然可以直接將瀏覽器重新整理，但感覺還是要有一個返回按鈕比較使用者友善。

<div class="top-nav">
  <button class="btn-back-home" @click="showLanding = true">
    ← 返回首頁
  </button>
</div>

/* ============ 返回按鈕 ============ */
.top-nav {
  width: 100%;
  max-width: 480px;
  display: flex;
  justify-content: flex-start;
  padding: 8px 16px;
  box-sizing: border-box;
}

.btn-back-home {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.3s ease;
}

.btn-back-home:hover {
  color: #e6c683;
}

點擊按鈕把 showLanding 設回 true，同樣會觸發上面那段 <Transition>，淡出主畫面、重新回到首頁。到這裡，「進去採集」與「退回首頁」的雙向互動就正式串接完成了。

四、成果展示

從首頁進入採集瓶的轉場體驗

點擊首頁的「開始採集微光」按鈕後，首頁內容會帶著小小程度的位移淡出；舊畫面完全退場後，採集瓶主畫面隨之浮現，整體切換順暢自然，營造出靜下心來進入採集空間的儀式感。
隨時退回首頁的雙向操作

在採集瓶主畫面的最頂部，點擊「← 返回首頁」按鈕，畫面同樣會透過過渡動畫無縫切換回首頁。無論是想重新閱讀引導小語，還是單純返回入口，整個操作流程都變得完整且自由。

點擊這裡：測試影片

明日預告

明天（Day 26）會帶來一個讓採集瓶更具個人特色的大功能：自訂微光調色盤。
目前瓶子裡的光芒其實還沒有綁定具體的情緒。但如果能讓使用者在剛進入時，自己為每顆光珠寫下它代表的感受，往後在每天放進微光時，可以更精準記錄當天的心情，月底回顧整瓶色卡時也才會真正有意義。
明天會分享如何透過彈窗讓大家自訂定義，並用 localStorage 把它們妥善記錄下來。我們明天見！