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值不能设置成一样的

转载于:https://www.cnblogs.com/vinieo/p/10178587.html