vue--transition-group

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.使用<transition-group>需要注意的點是

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

Key值不能設置成一樣的