vue视频教程系列第四十二节-transition-group的应用

<transition-group>详情

我们上一节课学习了<transition>组件，这个组件里只有一个元素，当我们在其里面多加一具元素时，发生了什么？浏览器里并不出现新加的内容。这是为什么呢？由于在vue里，<transition></transition>里只能放置一个元素。但是假如我们想在一个过渡效果里放置多个元素时，怎样办呢？用

<transition-group></transition-group>

<transition-group>的key属性：
当我们将<transition></transition>改成<transition-group></transition-group>，发现控制台里仍然有错误提醒—当<transition-group>里有多个元素时，需要给每个元素设置key值，并且每个key值是不能一样的。设置完后，页面就恢复正常了。

<transition>和<transition-group>的区别：

<transition>里只能包裹一个元素，而<transition-group>可以包裹多个元素

屏幕快照 2018-10-28 上午8.40.48.png

使用<transition-group>需要注意的点是：

1. 包裹的多个元素必需要设置key值

2. Key值不可设置成一样的

我曾经在刚学习vue时，这上面吃过大亏，使用transition包裹多个元素后，内容一直不能正常显示，好不容易正常显示了，还是出现各种问题，后来认真学习后才发现在这里坑比较多。写出来以供大家参考，防止大家再掉入坑里。

可能我的视频是会罗嗦少量，只是为了让所有刚步入前台学习vue的小伙伴们都能明白。假如有什么建议或者者有哪些不懂的地方，欢迎给我留言，只需我会的，我都会第一时间回复。

就到这里了，休息休息一会儿吧：）明天继续加油噢！