1.為什麼要使用<transition-group>

<transition></transition>是vue封裝的過渡元件

<transition name="fade" mode="out-in"> //mode="out-in"模式先出後進
    <router-view></router-view>
</transition >

css

.fade-enter-active, .fade-leave-active {
  transition: opacity .4s
}
.fade-enter,.fade-leave-to {
  opacity: 
 
0
}

這個元件裡只有一個元素，當我們在其裡面多加一具元素時，發生了什麼

瀏覽器裡並不出現新加的內容。這是為什麼？因為在vue裡，<transition></transition>裡只能放置一個元素

但是如果我們想在一個過渡效果裡放置多個元素時，怎麼辦

用<transition-group></transition-group>

2.<transition-group>的key屬性

當我們將<transition></transition>改成<transition-group></transition-group>，發現控制檯裡依然有錯誤提示—當<transition-group>裡有多個元素時，需要給每個元素設定key值，並且每個key值是不能一樣的。設定完後，頁面就恢復正常了。

<transition-group name="fade" mode="out-in">
    <router-view key="aa"></router-view>
    <div key="bb">merry christmas</div>
</transition-group>

3.<transition>和<transition-group>的區別

<transition>裡只能包裹一個元素

<transition-group>可以包裹多個元素

4.

包裹的元素必須要設定key值

Key值不能設定成一樣的