<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 > 需要注意的点是:
包裹的多个元素必须要设置 key 值
Key 值不能设置成一样的
我曾经在刚学习 vue 时, 这上面吃过大亏, 使用 transition 包裹多个元素后, 内容一直不能正常显示, 好不容易正常显示了, 还是出现各种问题, 后来认真学习后才发现在这里坑比较多. 写出来以供大家参考, 防止大家再掉入坑里.
可能我的视频是会罗嗦一些, 只是为了让所有刚步入前端学习 vue 的小伙伴们都能明白. 如果有什么建议或者有哪些不懂的地方, 欢迎给我留言, 只要我会的, 我都会第一时间回复.
就到这里了, 休息休息一会儿吧:) 明天继续加油噢!
来源: http://www.jianshu.com/p/50811c1e4234