摘要

CSS 過渡是使用 <Transition> 元件最常見的方式。Vue 負責在正確的時間點切換 CSS class，而我們則使用標準的 CSS transition 屬性來定義動畫的具體表現。

定義與說明

<Transition> 在進入和離開的過程中，會應用 6 個 class：

進入過程： v-enter-from → v-enter-active → v-enter-to
離開過程： v-leave-from → v-leave-active → v-leave-to

（如果 <Transition> 有 name 屬性，如 name="fade"，則 v- 會被替換為 fade-）。我們只需要為這些 class 定義樣式即可。

實作範例

一個從下方滑入的過渡效果。

CSS 過渡示例

.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.5s ease-out;
}
.slide-up-enter-from {
  opacity: 0;
  transform: translateY(20px);
}
.slide-up-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

結論

使用 CSS transition 是實現平滑過渡動畫的首選方式。它利用了瀏覽器的硬體加速，效能優秀，且語法直觀易懂。

CSS 過渡 transition CSS class