<template>
  <div>
    <button @click='visible = !visible'>Toggle Div</button>
    <transition name="fade">
      <div v-if="visible">
        Hello World
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  data () {
    return {
      visible: true
    }
  }
}
</script>

很簡單，對吧？
現在，我們需要新增一些樣式來實現真正的過渡效果了。
我們使用官方文件例子的一些樣式：
<style lang="scss"> .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } </style>
以上程式碼是做了什麼？其實這個很直觀，因為加了一些類似狀態的類名。
這些樣式說明當過渡啟用的時候，對opacity屬性新增過渡，使其平滑地變化。
然後，設定過渡進入開始狀態和過渡離開的結束狀態為零（不可見）。同時，要記住當元素沒有設定fade-enter或者fade-leave-to類名，opacity將會設定回預設值。

好了。
可以在你的Vue應用裡新增過渡效果了。現在，我們來繼續深入，瞭解更多細節。
另外，你也可以使用CSS動畫來實現過渡效果。
只有你能夠使用合適的類名，就可以根據自己的喜好對這些元件進行樣式設定。
下面來看看過渡效果的更高階用法。

在元件載入後使用過渡效果

超級簡單，只需要在過渡元素新增一個appear屬性即可，像這樣：

<transition name="fade" appear>
      <div v-if="visible">
        Hello World
      </div>
</transition>

多個元素使用過渡效果

同樣地，這個也是超級簡單。像下面那樣兩個div之間切換。

<transition name="fade" appear>
      <div v-if="visible">
        Option A
      </div>
      <div v-else>
        Option B
      </div>
</transition>

你所需要做的就是用transition元素將這些元素包裹起來，過渡效果就可以生效。
但需要注意以下幾點：
當在兩個元素之間應用Vue過渡效果時，有時兩個元素都是可見的並且正在移入/移出。如果要達到一個平滑的效果，你可能需要將它們絕對定位在彼此的頂部。
如果元素具有相同的標籤，Vue會進行優化而且只替換元素的內容，而不是重新銷燬建立。根據官方文件，如果需要在多個元素之間進行轉換，最佳實踐就是在元素上新增一個key。

動態元件使用過渡效果

這個相對於上面的例子更加簡單了。只需要把動態元件放在transition元素裡面就可以了。例如：

<transition name="fade" appear>
      <component :is='componentType' />
</transition>

建立一個可重用的過渡元件

使用slot建立一個可替換內容的元件，例如：

<template>
  <transition name="fade" appear>
    <slot></slot>
  </transition>
</template>

最後

沒什麼好說的。Happpy Coding。

後記

文章寫的實在太囉嗦，寫不下去了。還不如看官方文件。水文一篇。以上譯文僅用於學習交流，水平有限，難免有錯誤之處，敬請指正。

參考

原文
一個學習Vue的網站:learnVue