在Vue中，我們經常會使用v-show/v-if來決定網頁元素是否呈現。而在透過toggle或是按鈕觸發的時候又想要有動畫的呈現，該如何製作呢。

transition

Vue官方提供<transition>這個元件讓我們可以處理網頁元件過渡與漸變的效果

<transition>
//使用v-show或v-if判斷是否渲染的內容
<div v-show=></div>
</transition>

不過css還是要自己寫。

(圖片來源)

transition的CSS

CSS包括

• 進入動畫

1. 起始狀態: v-enter-from
2. 過渡內容: v-enter-active
3. 結束狀態: v-enter-to

• 離開動畫

1. 起始狀態: v-leave-from
2. 過渡內容: v-leave-active
3. 結束狀態: v-leave-to

transition命名方式

當我們想設置多組樣式的時候，可以透過name屬性，替不同的transition命名並且分組

name屬性

<transition name="collapse>
      <div v-if="isOpen" class="content">
        這是展開的內容
      </div>
</transition>

<transition name="fade>
      <div v-if="isShow" class="content">
        這是展開的內容
      </div>
</transition>

命名情況下的CSS

將.v改成.名字就行

例如.collapse-enter-active,.fade-enter-active

使用範例

<transition name="collapse>
      <div v-if="isOpen" class="content">
        這是展開的內容
      </div>
</transition>

.collapse-enter-active, .collapse-leave-active {
  transition: max-height 0.3s ease-out, opacity 0.3s;
  overflow: hidden;
}

.collapse-enter-from, .collapse-leave-to {
  max-height: 0;
  opacity: 0;
}

.collapse-enter-to, .collapse-leave-from {
  max-height: 200px; /* 可調整 */
  opacity: 1;
}

什麼時候要用transition?

其實我遇到的情況只是很簡單的目錄摺疊顯示動畫，在這種情況下應該使用v-show搭配CSS動畫就可以解決。

NOTE:

v-show 只是透過 display: none; 控制顯示/隱藏，不會移除 DOM 元素。

v-if 則是適合用於內容變化較大時，因為 DOM 會被銷毀，但每次切換都會重新建立元素，可能影響效能。

<template>
  <div class="accordion">
    <button @click="isOpen = !isOpen">切換目錄</button>

    <div class="content" :class="{ open: isOpen }">
      這是展開的內容
    </div>
  </div>
</template>

<style>
/* 內容樣式 */
.content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease-out, opacity 0.3s;
}

/* 展開時 */
.content.open {
  max-height: 200px;
  opacity: 1;
}
</style>